# Использование сервиса в Angular

В предыдущем уроке мы создали свой собственный сервис `DataService`. Давайте теперь импортируем его в компонент:

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

В декораторе `@Component` в свойстве `providers` нужно указать наш сервис:

`@Component({ ..... providers: [ DataService ] // тут })`

Теперь мы воспользуемся специальным подходом, который называется внедрение зависимости (dependency injection). Его суть заключается в том, что в конструкторе компонента мы можем передать наш сервис параметром и он автоматически попадет в приватное свойство нашего компонента. Смотрите в коде:

`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>`

Получите товары из вашего сервиса в компоненте и выведите их в темплейте компонента.

Сделайте в вашем сервисе метод для добавления нового товара. В компоненте сделайте кнопку, по клику на которую будет добавляться новый товар.

Сделайте форму с двумя инпутами и кнопкой, по нажатию на которую будет добавляться новый товар.

← →
↑