DEV Community

Bipon Biswas
Bipon Biswas

Posted on

2 1

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;
Enter fullscreen mode Exit fullscreen mode
  1. So we’re gonna create a public constructor. And this.dependencyTitle=“hello! Mahfuz Shazol”
constructor() {  
    this.dependencyTitle = "Hello! Mahfuz Shazol"
}
Enter fullscreen mode Exit fullscreen mode
  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>
Enter fullscreen mode Exit fullscreen mode

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"
    }
}
Enter fullscreen mode Exit fullscreen mode
  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"
    }
}
Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode

Now we have this file ready to go.

  1. Go to our app.component.ts . Import our messageProvider
import { MessageProvider } from './test.message';
Enter fullscreen mode Exit fullscreen mode
  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();
}
Enter fullscreen mode Exit fullscreen mode

And finally we’re using our messageProvider and our constructor, so we’re injecting these dependencies, that looks great too.

Output:
Alt Text

Github URL
StackBlitz URL

Reference

TypeScript
Angular CLI

Thanks for reading.

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️