Angular 2 - Dependency Injection

Dependency injection is the ability to add the functionality of components at runtime. Let’s take a look at an example and the steps used to implement dependency injection.
Step 1 − Create a separate class which has the injectable decorator. The injectable decorator allows the functionality of this class to be injected and used in any Angular JS module.
@Injectable() 
   export class classname {  
}
Step 2 − Next in your appComponent module or the module in which you want to use the service, you need to define it as a provider in the @Component decorator.
@Component ({  
   providers : [classname] 
})
Let’s look at an example on how to achieve this.
Step 1 − Create a ts file for the service called app.service.ts.
Step 2 − Place the following code in the file created above.
import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}
The following points need to be noted about the above program.
The Injectable decorator is imported from the angular/core module.
The Injectable decorator is imported from the angular/core module.
We are creating a class called appService that is decorated with the Injectable decorator.
We are creating a class called appService that is decorated with the Injectable decorator.
We are creating a simple function called getApp which returns a simple string called “Hello world”.
We are creating a simple function called getApp which returns a simple string called “Hello world”.
Step 3 − In the app.component.ts file place the following code.
import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}
The following points need to be noted about the above program.
First, we are importing our appService module in the appComponent module.
First, we are importing our appService module in the appComponent module.
Then, we are registering the service as a provider in this module.
Then, we are registering the service as a provider in this module.
In the constructor, we define a variable called _appService of the type appService so that it can be called anywhere in the appComponent module.
In the constructor, we define a variable called _appService of the type appService so that it can be called anywhere in the appComponent module.
As an example, in the ngOnInit lifecyclehook, we called the getApp function of the service and assigned the output to the value property of the AppComponent class.
As an example, in the ngOnInit lifecyclehook, we called the getApp function of the service and assigned the output to the value property of the AppComponent class.
Save all the code changes and refresh the browser, you will get the following output.

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page