Utilizando um Serviço no Angular

Na lição anterior, criamos nosso próprio serviço DataService. Vamos agora importá-lo para o componente:

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

No decorador @Component, na propriedade providers, precisamos especificar nosso serviço:

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

Agora, vamos utilizar uma abordagem especial, chamada injeção de dependência (dependency injection). Sua essência consiste no fato de que no construtor do componente podemos passar nosso serviço como um parâmetro, e ele automaticamente será atribuído a uma propriedade privada do nosso componente. Veja no código:

export class AppComponent {
	constructor(private dataService: DataService) { // injetando a dependência
		console.log(this.dataService); // serviço na propriedade privada
	}
}

A injeção para o nosso serviço funciona porque aplicamos anteriormente o decorador Injectable a ele.

Vamos agora obter os dados do nosso serviço no construtor da classe do componente, chamando o método correspondente:

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

Vamos exibir os dados obtidos no template do componente:

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

Obtenha os produtos do seu serviço no componente e exiba-os no template do componente.

Crie um método no seu serviço para adicionar um novo produto. No componente, crie um botão que, ao ser clicado, adicionará um novo produto.

Crie um formulário com dois inputs e um botão. Ao pressionar o botão, um novo produto será adicionado.