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>