Dependency Injection in Angular

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>