Angular 2 Cookbook

Injecting a simple service into a component

The most common use case will be for a component to directly inject a service into itself. Although the rhythms of defining service types and using dependency injection remain mostly the same, it's important to get a good hold of the fundamentals of Angular 2's dependency injection schema, as it differs in several important ways.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/4263.

Getting ready

Suppose you had the following skeleton application:

[app/root.component.ts] import {Component} from '@angular/core'; @Component({ selector: 'root', template: ` <h1>root component!</h1> <button (click)="fillArticle()">Show article</button> <h2>{{title}}</h2> ` }) export ...