Objective: In this article, you will know dependency injection concept, custom dependency injection in Angular.
Pre-requisite Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.
- create a property named dependencyTitle into app.component.ts file
public dependencyTitle: string;
- So we’re gonna create a public constructor. And
this.dependencyTitle=“hello! Mahfuz Shazol”
constructor() {
this.dependencyTitle = "Hello! Mahfuz Shazol"
}
- Go to app.component.html, we want to bind this p to the value of the title. So whatever is in that dependencyTitle property is want to show as our p, that’s enough.
<p>{{dependencyTitle}}</p>
Now we want get our messages to show in this title from a service, or some type of dependency class. So we want separate the responsibilities of our
application.
- So the first thing we want do is we want to create a class. Create a new file in this app folder named test.message.ts
export class MessageProvider{
public getMessage(): string{
return "Hey! Mahfuz Shazol"
}
}
- Now class can be injected into an Angular component. So the first thing we have to import a class **decorator* called injectable from Angular/core.
import { Injectable } from '@angular/core';
@Injectable()
export class MessageProvider{
public getMessage(): string{
return "Hey! Mahfuz Shazol"
}
}
This basically says that this could be injected into components throughout Angular application.
To make it available for injection, we need to use this array right here.
- Import messageProvider into app.module.ts
import { MessageProvider } from './test.message';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule
],
providers: [SampleService, MessageProvider],
bootstrap: [AppComponent]
})
export class AppModule { }
Now we have this file ready to go.
- Go to our app.component.ts . Import our messageProvider
import { MessageProvider } from './test.message';
- Go ahead and use the messageProvider. Because we’re not using this provider outside of this class.
constructor(private _messageProvider: MessageProvider) {
this.dependencyTitle = _messageProvider.getMessage();
}
And finally we’re using our messageProvider and our constructor, so we’re injecting these dependencies, that looks great too.
Reference
Thanks for reading.
Top comments (0)