Angular Service | Dependency Injection in Angular

Service
Dependency Injection
Example

Angular Service is a class which is defined outside but injected inside component or another service for modularity and reusability. Component can assign certain tasks to service like fetching data from server, logging, authentication and then fetch the output.

Service is a singleton class, means there is only one instance of service to avoid memory leakage, to improve performance and for reusability of code. It is injected in component or another service by Angular Dependency Injection.

Service are used for various tasks like

API
Authentication
logging
Authorization

Some build in services are

HttpClient
Router
Title

Create Service

Angular Service is singleton class, so there is only one instance. To create a service in angular, use Angular's CLI. Lets create a sample service in example to get a return string. Follow steps below.

create service

Using Angular CLI, create a service name app.

ng generate service app

service.ts

Service includes @Injectable decorator. providedIn property inject service in root module. The constructor is used to to inject another service.

Add a function getData() in export class which return some string.

           <!--app.service.ts-->
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})

export class AppService {
    
     getData(){
        return "from service";
    }
    
}

Add service in component

Import service in component. Inject service name in constructor of component as private access modifier. Use ngOnInit life cycle hook and assign the data from service into a variable.

           <!--app.component.ts-->
import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports:[],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'myApp';

  data:any;

  constructor(private service: AppService){ }

  ngOnInit(){
    this.data=this.service.getData();
  }

}

Dependency Injection

Angular Dependency Injection or DI is a Design Pattern where Angular request another program known as DI Container for its dependencies. As Angular is a full fledged framework, it a build in DI Container.

Lets suppose our AppComponent has dependency on ErrorService, so AppComponent will not create instance of ErrorService. Instead it will as Angular DI Container to create an instance object as pass it. Every time we pass service in constructor, DI Container will create an object of service class and inject into component.

           <!--app.component.ts-->
  import { Component } from '@angular/core';
  import { AppService } from './app.service';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports:[],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
  })
  export class AppComponent {
    title = 'myApp';
    
    constructor(private service: AppService){ }
  
  }

Service Example

Lets calculate area of rectangle using service. Create a function getArea in service with two parameters x and y. The return value is area of rectangle.

           <!--app.service.ts-->
  import { Injectable } from '@angular/core';
      
  @Injectable({
      providedIn: 'root'
  })
  
  export class AppService {
      
    getArea(x:number,y:number){ 
      return x * y ;
    }
      
  }

           <!--app.component.ts-->
  import { Component } from '@angular/core';
  import { AppService } from './app.service';
  
  @Component({
    selector: 'app-root',
    standalone: true,
    imports:[],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css',
  })
  export class AppComponent {
    title = 'myApp';
  
    a=0;
  
    constructor(private service:AppService){ }
  
    ngOnInit(){
      this.a=this.service.getArea(3,4);
    }
  
  }

           <!--app.component.html->

<p>Area is {{a}}</p>

The area of rectangle is printed as output in component.