Dependency Injection

Dependency Injection (DI) is an important application design pattern. DI is a coding pattern in which class asks for dependencies from external sources rather than creating it itself.

In Angular, the DI framework provides declared dependencies to a class when that class is instantiated.Angular dependency injection is based on providers, injectors and tokens. Every angular module has an injector associated to it. The injector is responsible to create the dependencies and inject them when needed. An injector creates dependencies using providers

The DI in Angular basically consists of three things:

Injector - The injector object that exposes APIs to us to create instances of dependencies.

- The injector object that exposes APIs to us to create instances of dependencies.

Provider - A provider is like a recipe that tells the injector how to create an instance of a dependency. A provider takes a token and maps that to a factory function that creates an object.

- A provider is like a recipe that tells the injector how to create an instance of a dependency. A provider takes a token and maps that to a factory function that creates an object.

Dependency - A dependency is the type of which an object should be created.

- A dependency is the type of which an object should be created.

Steps to implement Dependency Injection

Step 1: Create an injectable service class

ng generate service app

This will create two files , a app.service.ts file and the corresponding app.service.spec.ts.

app.service.ts

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class AppService { constructor() { } }

Step 2: Next add a simple getApplication method to return some string.

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class AppService { constructor() { } getApplication(){ return "Test Dependency Injection"; } }

Step 3: When we define a constructor parameter with the AppService class type, Angular knows to inject the service associated with that AppService class. Open app.component.ts and inject the above created service as below :

import { Component } from '@angular/core'; import { AppService } from './app.service'; @Component({ selector: 'my-application', template: '<div>{{value}}</div>', }) export class AppComponent { application: string = ""; constructor(private appService: AppService) { } ngOnInit(): void { this.application = this.appService.getApplication(); } }

So lets understand the above program :

1. First we import a AppService into AppComponent .

2. After this we register a service as a provider in this module.

3. In constructor we define a variable appService of type AppService , and that can be used anywhere in this component.

of type AppService , and that can be used anywhere in this component. 4. So , just to test we call a appService getApplication method inside ngOnOnit lifecycle hook.

So running the above code will output

Test Dependency Injection

Back Next