Create a service<\/p>\n\n\n\n
add public\/data.json with the following content :<\/p>\n\n\n
\n[\n { "lastname": "Doe", "firstname": "John" },\n { "lastname": "Doe", "firstname": "Jannette" }\n]\n<\/pre><\/div>\n\n\ngenerate new service to load data.json<\/strong><\/p>\n\n\n\n$ ng generate service my-service\n<\/pre><\/div>\n\n\nupdate my-service.service.ts file<\/p>\n\n\n
\nimport { Injectable } from '@angular\/core';\n\n\/\/ import http client and rxjs\nimport { HttpClient } from '@angular\/common\/http';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class MyServiceService {\n\n private dataUrl = '\/data.json';\n\n constructor(private http: HttpClient) {}\n\n getData(): Observable<{ lastname: string; firstname: string }[]> {\n return this.http.get<{ lastname: string; firstname: string }[]>(this.dataUrl);\n }\n}\n<\/pre><\/div>\n\n\nupdate app.module.ts to import HttpClientModule<\/p>\n\n\n
\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\n\nimport { AppRoutingModule } from '.\/app-routing.module';\nimport { AppComponent } from '.\/app.component';\n\nimport { HttpClientModule } from '@angular\/common\/http';\n\n\/\/ primeNG provider\nimport { provideAnimationsAsync } from '@angular\/platform-browser\/animations\/async';\nimport { providePrimeNG } from 'primeng\/config';\nimport Aura from '@primeng\/themes\/aura';\nimport { MyComponentComponent } from '.\/my-component\/my-component.component';\n\n\/\/ import InputTextModule\nimport { InputTextModule } from 'primeng\/inputtext';\nimport { FormsModule } from '@angular\/forms';\n\n@NgModule({\n declarations: [\n AppComponent,\n MyComponentComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n InputTextModule,\n FormsModule,\n HttpClientModule\n ],\n providers: [\n \/\/ add primeNG providers\n provideAnimationsAsync(),\n providePrimeNG({\n theme: {\n preset: Aura\n }\n }) \n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/pre><\/div>\n\n\nupdate my-component.component.ts<\/p>\n\n\n
\nimport { Component } from '@angular\/core';\n\n\/\/ import service\nimport { MyServiceService } from '..\/my-service.service';\n\n@Component({\n selector: 'app-my-component',\n standalone: false,\n templateUrl: '.\/my-component.component.html',\n styleUrl: '.\/my-component.component.css'\n})\nexport class MyComponentComponent {\n\n firstname: string = 'John';\n\n \/\/ init data array\n data: { lastname: string; firstname: string }[] = [];\n\n \/\/ inject service\n constructor(private myService: MyServiceService) { }\n\n \/\/ load data when component init\n ngOnInit(): void {\n this.myService.getData().subscribe((data) => {\n this.data = data;\n });\n }\n\n}\n<\/pre><\/div>\n\n\nfinally my-component.component.html<\/p>\n\n\n
\n<p>my-component works!<\/p>\n\n<div class="card flex justify-center">\n <input type="text" pInputText [(ngModel)]="firstname" \/>\n<\/div>\n\nHi {{ firstname }} !\n\n<!-- add data -->\n<h1>Data<\/h1>\n<ul>\n <li *ngFor="let elt of data">\n {{ elt.lastname }} {{ elt.firstname }}\n <\/li>\n<\/ul>\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"Create a service add public\/data.json with the following content : generate new service to load data.json update my-service.service.ts file update app.module.ts to import HttpClientModule update my-component.component.ts finally my-component.component.html<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2069,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2136","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages\/2136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2136"}],"version-history":[{"count":7,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages\/2136\/revisions"}],"predecessor-version":[{"id":2143,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages\/2136\/revisions\/2143"}],"up":[{"embeddable":true,"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=\/wp\/v2\/pages\/2069"}],"wp:attachment":[{"href":"https:\/\/blog.rabahi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}