Utilizarea serviciului în Angular

În lecția precedentă am creat propriul nostru serviciu DataService. Să îl importăm acum în componentă:

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

În decoratorul @Component în proprietatea providers trebuie să indicăm serviciul nostru:

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

Acum vom folosi o abordare specială, care se numește injectarea dependenței (dependency injection). Esența sa constă în faptul că în constructorul componentului putem transmite serviciul nostru ca parametru și acesta va ajunge automat în proprietatea privată a componentului nostru. Uitați-vă în cod:

export class AppComponent {
	constructor(private dataService: DataService) { // injectăm dependența
		console.log(this.dataService); // serviciul în proprietatea privată
	}
}

Injectarea pentru serviciul nostru funcționează, deoarece am aplicat anterior acestuia decoratorul Injectable.

Să obținem acum în constructorul clasei componentului date din serviciul nostru, apelând metoda corespunzătoare:

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

Să afișăm datele obținute în șablonul componentului:

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

Obțineți produsele din serviciul dvs. în componentă și afișați-le în șablonul componentului.

Creați în serviciul dvs. o metodă pentru adăugarea unui produs nou. În componentă faceți un buton, la click pe care se va adăuga un nou produs.

Creați un formular cu două input-uri și un buton, la apăsarea căruia se va adăuga un produs nou.