Angularда сервисдан фойдаланиш

Олдинги дарсликда биз ўзимизнинг DataService сервисимизни яратган эдик. Келинг энди уни компонентга импорт килайлик:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // бу ерда

@Component декораторининг providers хусусиятига бизнинг сервисимизни кўрсатиш керак:

@Component({
	.....
	providers: [ DataService ] // бу ерда
})

Энди биз богликлик инжекцияси (dependency injection) деб аталувчи maxсус ёндашувдан фойдаланамиз. Унинг мақсади шундан иборатки, компонентнинг конструкторида биз сервисимизни параметр сифатида ўтказа оламиз ва у автоматик тарзда бизнинг компонентимизнинг хусусий хусусиятига айланади. Кодда ку́ринг:

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>

Сервисингиздан товарларни компонентда олинг ва уларни компонентнинг шаблонида чиқаринг.

Сервисингизда янги товар қў́шиш учун метод яратинг. Компонентда тугма яратинг, уни босганда янги товар қў́шилсин.

Иккита инпут ва тугмадан иборат форма яратинг, тугма босилганда янги товар қў́шилсин.