Dependency Injection
The dependency in any application is the central part of the system which provides functionality to their subordinates by a connection mechanism. Angular provides separate way of implementing dependency injection by a separate providers collection in the module.
Now suppose in our ‘MyFirstAngularProject’ example with states/City, we want to change the tabs dynamically without changing too much of a code.
If we need to display States:
If we need to display Cities instead of States:
We can achieve this using the centralized class which will provides the value based on the provider’s collection and the data will be changed accordingly.
Let’s create a simple Dependency Injection file in the Helpers.ts
DependencyInjection.ts
export interface INeedStateOrCity{
GetCityOrStates();
}
export class BaseClass implements INeedStateOrCity{
GetCityOrStates(){
}
}
export class States implements BaseClass{
GetCityOrStates(): string
{
return "States";
}
}
export class City implements BaseClass{
GetCityOrStates(): string
{
return "City";
}
}
We write a simple BaseClass which inherits from INeedCityOrStates() Interface. This BaseClass can be consumed by inheriting classes (States / City ) which defines GetCityOrStates and the consuming class will set the value accordingly.
App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyRoute } from '../Routing/Routing';
import { AppComponent } from './app.component';
import { City, States, BaseClass } from 'src/Helpers/DependencyInjection';
var cities:any =[];
cities.push({provide:"State", useClass: States});
cities.push({provide:"City", useClass: City});
cities.push({provide:BaseClass, useClass: BaseClass});
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(MyRoute),
],
providers: [cities],
bootstrap: [AppComponent]
})
export class AppModule { }
Import the City, States, BaseClass written under DependencyInjection and create a providers collection (cities). The provide keyword will refer the corresponding class in the below code written in the module.
var cities:any =[];
cities.push({provide:"State", useClass: States});
cities.push({provide:"City", useClass: City});
cities.push({provide:BaseClass, useClass: BaseClass});
app.component.ts
import { Component, Injector } from '@angular/core';
import { City, States, BaseClass } from 'src/Helpers/DependencyInjection';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'This is the title set from component and displayed in the view';
loadPanel: string;
city:BaseClass = null;
constructor(_injector: Injector)
{
var val = _injector.get("State");
this.loadPanel = val.GetCityOrStates();
}
}
Now, is the time to Inject the Custom Dependencies in the component.
Define the namespace Injector and in the below line, refer the provider’s collection based on the key provided. Since “State” is using the class State in the DependencyInjection.ts the value returned will be ‘State’ and the tab values will now display the state collection.
var val = _injector.get("State");
app.component.ts
<table>
<tr>
<table class="gradienttable">
<tr>
The following is a
{{loadPanel == 'States' ? 'State' : (loadPanel == 'City' ? 'City' : 'null')}}
collection
</tr>
</table>
</tr>
<tr>
<td>
<ng-template [ngIf]="loadPanel === 'States'" [ngIfElse]="City">
<table>
<tr>
<td>
<div class="card card-small" role="main">
<a [routerLink]="['/Illinois/View']"> Illinois </a>
</div>
</td>
<td>
<div class="card card-small" role="main">
<a [routerLink]="['/NewYork/View']"> New York </a>
</div>
</td>
<td>
<div class="card card-small" role="main">
<a [routerLink]="['/California']"> California </a>
</div>
</td>
</tr>
</table>
</ng-template>
<ng-template #City>
<table>
<tr>
<td>
<div class="card card-small" role="main">
<a [routerLink]="['/Illinois/View']"> Chicago </a>
</div>
</td>
<td>
<div class="card card-small" role="main">
<a [routerLink]="['/NewYork/View']"> Manhatton </a>
</div>
</td>
<td>
<div class="card card-small" role="main">
<a [routerLink]="['/California']"> San Fransisco </a>
</div>
</td>
</tr>
</table>
</ng-template>
</td>
</tr>
<tr>
<td colspan="4">
<div>
<router-outlet>
</router-outlet>
</div>
</td>
</tr>
</table>
The above app.component.html code is self-explanatory and the content will displayed based on the loadPanel value set on the component.
UI (loadPanel=State)
UI(loadPanel =City)
Tech Tutorials 