Dependency Injection (DI) is a core concept of Angular 2+ and allows a class receive dependencies from another class. Most of the time in Angular, dependency injection is done by injecting a service class into a component or module class.
Here’s for example how you would define an injectable service. Pay special attention to the highlighted parts:
Service: popcorn.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class PopcornService {
constructor() {
console.log("Popcorn has been injected!");
}
cookPopcorn(qty) {
console.log(qty, "bags of popcorn cooked!");
}
And here’s how you would inject our Popcorn service it in a component:
Component: app.component.ts
import { Component } from '@angular/core';
import { PopcornService } from './popcorn.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [PopcornService]
})
export class AppComponent {
constructor(private popcorn: PopcornService) {}
cookIt(qty) {
this.popcorn.cookPopcorn(qty);
}
The cookIt() method in the template calls the cookPopcorn() method in the injected service. Let’s make use of our cookIt() method in our template:
Template: app.component.html
<input type="number" #qty placeholder="How many bags?">
<button type="button" (click)="cookIt(qty.value)">
Cook it!
</button>
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up