My linux world » my first service

Create a service

add public/data.json with the following content :

[
    { "lastname": "Doe", "firstname": "John" },
    { "lastname": "Doe", "firstname": "Jannette" }
]

generate new service to load data.json

$ ng generate service my-service

update my-service.service.ts file

import { Injectable } from '@angular/core';

// import http client and rxjs
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyServiceService {

  private dataUrl = '/data.json';

  constructor(private http: HttpClient) {}

  getData(): Observable<{ lastname: string; firstname: string }[]> {
    return this.http.get<{ lastname: string; firstname: string }[]>(this.dataUrl);
  }
}

update app.module.ts to import HttpClientModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

// primeNG provider
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { MyComponentComponent } from './my-component/my-component.component';

// import InputTextModule
import { InputTextModule } from 'primeng/inputtext';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    MyComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    InputTextModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [
    // add primeNG providers
    provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: Aura
            }
        })  
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

update my-component.component.ts

import { Component } from '@angular/core';

// import service
import { MyServiceService } from '../my-service.service';

@Component({
  selector: 'app-my-component',
  standalone: false,
  templateUrl: './my-component.component.html',
  styleUrl: './my-component.component.css'
})
export class MyComponentComponent {

  firstname: string = 'John';

  // init data array
  data: { lastname: string; firstname: string }[] = [];

  // inject service
  constructor(private myService: MyServiceService) { }

  // load data when component init
  ngOnInit(): void {
    this.myService.getData().subscribe((data) => {
      this.data = data;
    });
  }

}

finally my-component.component.html

<p>my-component works!</p>

<div class="card flex justify-center">
    <input type="text" pInputText [(ngModel)]="firstname" />
</div>

Hi {{ firstname }} !

<!-- add data -->
<h1>Data</h1>
<ul>
  <li *ngFor="let elt of data">
    {{ elt.lastname }} {{ elt.firstname }}
  </li>
</ul>