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:

import { 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:

@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:

export 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:

export 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:

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

Haal de producten uit uw service op in het component en geef ze weer in de template van het component.

Maak in uw service een methode om een nieuw product toe te voegen. Maak in het component een knop, waarbij bij een klik een nieuw product wordt toegevoegd.

Maak een formulier met twee invoervelden en een knop, waarbij bij het indrukken ervan een nieuw product wordt toegevoegd.