Szolgáltatás használata Angularban

Az előző leckében létrehoztuk a saját szolgáltatásunkat DataService. Most pedig importáljuk be a komponensbe:

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

A @Component dekorátor providers tulajdonságában meg kell adnunk a szolgáltatásunkat:

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

Most egy speciális megközelítést fogunk alkalmazni, amelyet függőséginjektálásnak (dependency injection) hívnak. Ennek a lényege az, hogy a komponens konstruktorában átadhatjuk szolgáltatásunkat paraméterként, és az automatikusan a komponensünk privát tulajdonságába kerül. Nézd meg a kódban:

export class AppComponent {
	constructor(private dataService: DataService) { // függőség injektálása
		console.log(this.dataService); // szolgáltatás a privát tulajdonságban
	}
}

A függőséginjektálás a szolgáltatásunknál működik, mivel korábban alkalmaztuk rá a Injectable dekorátort.

Most pedig a komponens osztály konstruktorában szerezzük be az adatokat a szolgáltatásunktól a megfelelő metódus meghívásával:

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

Most jelenítsük meg a kapott adatokat a komponens template-jében:

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

Szerezd be a termékeket a szolgáltatásodból a komponensben és jelenítsd meg őket a komponens template-jében.

Készíts a szolgáltatásodban egy metódust új termék hozzáadására. A komponensben készíts egy gombot, amelyre kattintva új termék kerül hozzáadásra.

Készíts egy űrlapot két input mezővel és egy gombbal, amelyre kattintva új termék kerül hozzáadásra.