Utilisation d'un service dans Angular

Dans la leçon précédente, nous avons créé notre propre service DataService. Maintenant, importons-le dans le composant :

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // ici

Dans le décorateur @Component, dans la propriété providers, nous devons indiquer notre service :

@Component({
	.....
	providers: [ DataService ] // ici
})

Maintenant, nous allons utiliser une approche spéciale, appelée injection de dépendance (dependency injection). Son essence réside dans le fait que dans le constructeur du composant, nous pouvons passer notre service en paramètre et il sera automatiquement disponible en tant que propriété privée de notre composant. Regardez le code :

export class AppComponent {
	constructor(private dataService: DataService) { // nous injectons la dépendance
		console.log(this.dataService); // le service dans la propriété privée
	}
}

L'injection pour notre service fonctionne, car nous lui avons précédemment appliqué le décorateur Injectable.

Maintenant, dans le constructeur de la classe du composant, obtenons les données de notre service, en appelant la méthode correspondante :

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

Affichons les données obtenues dans le template du composant :

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

Obtenez les produits de votre service dans le composant et affichez-les dans le template du composant.

Créez dans votre service une méthode pour ajouter un nouveau produit. Dans le composant, créez un bouton, au clic duquel un nouveau produit sera ajouté.

Créez un formulaire avec deux inputs et un bouton, en cliquant sur lequel un nouveau produit sera ajouté.