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 title of titles; let i = index" 
             [articleTitle]="title"> 
      <button (click)="remove(i)">X</button> 
    </article> 
   ...