Angular 2 Cookbook

Utilizing component lifecycle hooks

Angular's component rendering process has a large number of facets, and different types of data and references will become available at different times. To account for this, Angular 2 allows components to set callbacks, which will be executed at different points in the component's life cycle.

Note

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

Getting ready

Suppose you began with the following application, which simply allows the addition and removal of articles from a single input:

[app/article-list.component.ts] import {Component} from '@angular/core'; @Component({ selector: 'article-list', template: ` <input (keyup.enter)="add($event)"> <article *ngFor="let ...