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.


The code, links, and a live example of this are available at

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 ...

Get Angular 2 Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.