Angular: Create a custom dependency injection

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.

1. create a property named dependencyTitle into app.component.ts file

public dependencyTitle: string;

1. So we’re gonna create a public constructor. And this.dependencyTitle=“hello! Mahfuz Shazol”

constructor() {  
    this.dependencyTitle = "Hello! Mahfuz Shazol"
}

1. 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.

1. 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"
    }
}

1. 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.

1. 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.

1. Go to our app.component.ts . Import our messageProvider

import { MessageProvider } from './test.message';

1. 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.

Output:

Github URL
StackBlitz URL

Reference

TypeScript
Angular CLI

Thanks for reading.