Gebruik van een service in Angular

In de vorige les hebben we onze eigen service DataService gemaakt. Laten we deze nu importeren in het component:

app/app.component.tsimport { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // hier

In de decorator @Component moet in de eigenschap providers onze service worden opgegeven:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // hier
})

Nu maken we gebruik van een speciale aanpak, die dependency injection wordt genoemd. De essentie ervan is dat we in de constructor van het component onze service als parameter kunnen doorgeven en deze automatisch in een private eigenschap van ons component terechtkomt. Zie in de code:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // dependency injection
    console.log(this.dataService); // service in private eigenschap
  }
}

Dependency injection voor onze service werkt, omdat we er eerder de decorator Injectable op hebben toegepast.

Laten we nu in de constructor van de component class de gegevens uit onze service ophalen, door de bijbehorende methode aan te roepen:

app/app.component.tsexport class AppComponent {
  public data: string[] = [];
  
  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

Laten we de verkregen gegevens weergeven in de template van het component:

app/app.component.html<ol>
  <li *ngFor="elem of data">
    {{ elem }}
  </li>
</ol>