Utilizzo del servizio in Angular

Nella lezione precedente abbiamo creato il nostro servizio DataService. Ora importiamolo nel componente:

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

Nel decoratore @Component nella proprietà providers dobbiamo specificare il nostro servizio:

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

Ora utilizzeremo un approccio speciale, chiamato iniezione di dipendenze (dependency injection). La sua essenza consiste nel fatto che nel costruttore del componente possiamo passare il nostro servizio come parametro e automaticamente finirà in una proprietà privata del nostro componente. Guardate nel codice:

export class AppComponent {
	constructor(private dataService: DataService) { // iniettiamo la dipendenza
		console.log(this.dataService); // servizio nella proprietà privata
	}
}

L'iniezione per il nostro servizio funziona, perché in precedenza abbiamo applicato ad esso il decoratore Injectable.

Ora nel costruttore della classe del componente otteniamo i dati dal nostro servizio, richiamando il metodo corrispondente:

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

Ora visualizziamo i dati ottenuti nel template del componente:

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

Ottieni i prodotti dal tuo servizio nel componente e visualizzali nel template del componente.

Crea nel tuo servizio un metodo per aggiungere un nuovo prodotto. Nel componente crea un pulsante, al click del quale verrà aggiunto un nuovo prodotto.

Crea un modulo con due input e un pulsante, alla cui pressione verrà aggiunto un nuovo prodotto.