Sometimes you need to inject a simple value into multiple components
To inject a simple value you have to pass an object to the providers array of your NgModule decorator.
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [
{
provide: "language",
useValue: "en"
}
],
bootstrap: [AppComponent]
})
And in your components import Inject decorator:
@Inject() is a decorator relevant for DI and helps you manually inject a value into your components.
import { Component, Inject } from "@angular/core";
....
export class AppComponent {
constructor(@Inject("language") private language) {
console.log(this.language);
}
}
You can also use @Inject() decorator to provide services from your module.
Ex:
import { Component, Inject } from "@angular/core";
import { AppService } from "./app.service";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
constructor(
@Inject("language") private language,
@Inject(AppService) private appSer,
private appSer2: AppService
) {
console.log(this.language, this.appSer, this.appSer2);
}
}
Using:
...
@Inject(AppService) private appSer,
private appSer2: AppService
...
Above code illustrates 2 ways of injecting a service into your component.
Hope you find it useful and see you on the next post!
Stay safe!
Top comments (2)
Hi Daniel! I don't understand. Why would you want to inject services this way when they can be provided in Root and initialised in the constructor?
@Hi AlleAmiDev sorry, but maybe I wasn't enough clear about it.
You are right, using
@Inject()it's not a desired way to inject services into your components, but that was just an example.You should use
@Inject('value')when you need to inject just a specific value and not a whole instance.For ex:
and then in your components:
Did I answer your question? :-)