Χρήση υπηρεσίας στο Angular

Στο προηγούμενο μάθημα δημιουργήσαμε τη δική μας υπηρεσία DataService. Ας την εισαγάγουμε τώρα στο component:

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

Στον decorator @Component στην ιδιότητα providers πρέπει να ορίσουμε την υπηρεσία μας:

@Component({
	.....
	providers: [ DataService ] // εδώ
})

Τώρα θα χρησιμοποιήσουμε μια ειδική προσέγγιση, που ονομάζεται εξάρτηση εισαγωγής (dependency injection). Η ουσία της συνίσταται στο γεγονός ότι στον constructor του component μπορούμε να περάσουμε την υπηρεσία μας ως παράμετρο και αυτόματα θα μεταφερθεί σε ιδιωτική ιδιότητα του component μας. Δείτε στον κώδικα:

export class AppComponent {
	constructor(private dataService: DataService) { // εισάγουμε την εξάρτηση
		console.log(this.dataService); // η υπηρεσία σε ιδιωτική ιδιότητα
	}
}

Η εισαγωγή για την υπηρεσία μας λειτουργεί, καθώς προηγουμένως εφαρμόσαμε σε αυτήν τον decorator Injectable.

Ας λάβουμε τώρα στον constructor της κλάσης του component δεδομένα από την υπηρεσία μας, καλώντας την αντίστοιχη μέθοδο:

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

Ας εμφανίσουμε τα δεδομένα που ελήφθησαν στο template του component:

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

Λάβετε τα προϊόντα από την υπηρεσία σας στο component και εμφανίστε τα στο template του component.

Δημιουργήστε στην υπηρεσία σας μια μέθοδο για προσθήκη νέου προϊόντος. Στο component δημιουργήστε ένα κουμπί, upon clicking on which a new product will be added. στο οποίο θα προστίθεται ένα νέο προϊόν.

Δημιουργήστε μια φόρμα με δύο inputs και ένα κουμπί, upon pressing which a new product will be added. στο πάτημα του οποίου θα προστίθεται νέο προϊόν.