Користење на сервис во Angular

Во претходната лекција создадовме сопствен сервис DataService. Ајде сега да го импортираме во компонентата:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // овде

Во декораторот @Component во својството providers треба да го наведеме нашиот сервис:

@Component({
	.....
	providers: [ DataService ] // овде
})

Сега ќе го искористиме специјалниот пристап, кој се нарекува внедрување на зависност (dependency injection). Неговата суштина се состои во тоа што во конструкторот на компонентата можеме да го пренесеме нашиот сервис како параметар и тој автоматски ќе се најде во приватното својство на нашата компонента. Погледнете во кодот:

export class AppComponent {
	constructor(private dataService: DataService) { // внедруваме зависност
		console.log(this.dataService); // сервисот во приватно својство
	}
}

Внедрувањето за нашиот сервис функционира, бидејќи претходно применевме на него декоратор Injectable.

Ајде сега во конструкторот на класата компонента да ги добиеме податоците од нашиот сервис, со повикување на соодветниот метод:

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

Ајде да ги прикажеме добиените податоци во темплејтот на компонентата:

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

Добијте ги производите од вашиот сервис во компонентата и прикажете ги во темплејтот на компонентата.

Направете во вашиот сервис метод за додавање нов производ. Во компонентата направете копче, при клик на кое ќе се додава нов производ.

Направете форма со два инпути и копче, при притискање на кое ќе се додава нов производ.