Back to Angular Course

What is a Service?

• A Service is a typescript class and a reusable code which can be used in multiple components.
• Service can be implemented with the help of Dependency Injection.

For example, ErrorLoggingService, UserDataService etc.

How to Create Service in Angular?

We can create a service in angular using CLI command

ng generate service services/employee

How to use Dependency Injector with Services in Angular?

• Add the @Injectable() decorator to a service class. This tells Angular that the class can be injected into other components.
• Register the service with a provider. This can be done in the @Injectable() decorator or in the @Component() metadata of the component that needs to use the service.
• Inject the service into a component. This can be done in the constructor of the component.

Lets see an example,

ng generate service services/employee

employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Employee } from '../interfaces/employee'
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  employeeData = "../mock/empData.json";

  constructor(private _httpClient: HttpClient) { }

  public getEmployeeData$() {
    return this._httpClient.get('http://localhost:3000/employeeData');
  }
}

empData.json

{
    "employeeData": [
        {
            "name": "Praveen",
            "gender": "Male",
            "designation": "Solution Architect",
            "experience": "17",
            "location": "Hyderabad",
            "salary": "5000000"
        },
        {
            "name": "Kiran",
            "gender": "Male",
            "designation": "Technical Lead",
            "experience": "16",
            "location": "Hyderabad",
            "salary": "4200000"
        },
        {
            "name": "Ramesh",
            "gender": "Male",
            "designation": "Tester",
            "experience": "5",
            "location": "Hyderabad",
            "salary": "1000000"
        },
        {
            "name": "Kavya",
            "gender": "Female",
            "designation": "Technical Associate",
            "experience": "5",
            "location": "Hyderabad",
            "salary": "1200000"
        },
        {
            "name": "Priya",
            "gender": "Female",
            "designation": "Senior Technical Associate",
            "experience": "9",
            "location": "Hyderabad",
            "salary": "2900000"
        }
    ]
}

Lets call this service in the dashboard component

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../../services/employee.service';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent implements OnInit {
  public employeeData: any[] = [];
  constructor(private _EmployeeService: EmployeeService) {
  }
  ngOnInit(): void {
    this.getEmployeeData();
  }


  getEmployeeData() {
    this._EmployeeService.getEmployeeData$().subscribe((response: any) => {
      this.employeeData = response;
    })
  }
}

What is Hierarchical Dependency Injection?

Service needs to be injected at root level so that it is available for all the components and modules which is a default practice in Angular.

What is Provider in Angular?

A provider is an object declared inside decorators which inform Angular that a particular service is available for injecting inside the components.

We can add provider in 3 different ways.

• module level
• root level
• component level