Uso de servicios en Angular

En la lección anterior creamos nuestro propio servicio DataService. Ahora vamos a importarlo en el componente:

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

En el decorador @Component en la propiedad providers debemos especificar nuestro servicio:

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

Ahora utilizaremos un enfoque especial, llamado inyección de dependencias (dependency injection). Su esencia consiste en que en el constructor del componente podemos pasar nuestro servicio como parámetro y automáticamente estará disponible como una propiedad privada de nuestro componente. Observen en el código:

export class AppComponent {
	constructor(private dataService: DataService) { // inyectamos la dependencia
		console.log(this.dataService); // servicio en propiedad privada
	}
}

La inyección para nuestro servicio funciona, ya que anteriormente aplicamos a él el decorador Injectable.

Ahora obtengamos los datos de nuestro servicio en el constructor de la clase del componente, llamando al método correspondiente:

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

Mostremos los datos obtenidos en la plantilla del componente:

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

Obtenga los productos de su servicio en el componente y muéstrelos en la plantilla del componente.

Cree en su servicio un método para agregar un nuevo producto. En el componente haga un botón, al hacer clic en el cual se agregará un nuevo producto.

Cree un formulario con dos inputs y un botón, al presionar el cual se agregará un nuevo producto.