Table of Contents

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

				
					
&lt;input type="number" #qty placeholder="How many bags?"&gt;

&lt;button type="button" (click)="cookIt(qty.value)"&gt;

  Cook it!

&lt;/button&gt;