Создание службы в Angular с помощью CLI/ручно

Создайте службу с помощью CLI

ng generate service <service-name>

Структура

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class <service-name> {

  constructor() { }

}

Создание службы вручную

Чтобы создать новый сервис вручную:

1. Перейдите в каталог вашего проекта Angular.
2. Создайте новый файл <service-name>.service.ts.
3. В верхней части файла добавьте следующий оператор импорта.

import { Injectable } from '@angular/core';

1. Добавьте службу @Injectable()

@Injectable({
  providedIn: 'root',
})

1. Добавьте оператор class, включающий код компонента с конструктором.

export class <service-name> {

  constructor() { }

}

1. Используя сервис в компоненте, сначала нужно сделать Inject в конструкторе следующим образом:

   Добавить в конструктор параметр private ex : heroService типа HeroService.

// example
constructor(private heroService: HeroService) {}

  Next Import :

// example
import { HeroService } from '../hero.service';

1. Нужно добавить в <app.module.ts> вот так :

// example
@Component({
  /* . . . */
  providers: [HeroService]
})

и импортировать в него.

// example
import { HeroService } from '../hero.service';

Ссылка

Сервис Angular

Живой пример :

Stack Blitz