Angular 2 Cookbook

Using ngFor and ngIf structural directives for model-based DOM control

Any developer that has used a client framework is intimately familiar with two basic operations in an application: iterative rendering from a collection and conditional rendering. The new Angular 2 implementations look a bit different but operate in much the same way.

Note

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

Getting ready

Suppose you had the following application:

[app/article-list.component.ts] import {Component} from '@angular/core'; @Component({ selector: 'article-list', template: '' }) export class ArticleListComponent { articles:Array<Object> = [ {title: 'Foo', active: true}, {title: 'Bar', active: false}, {title: 'Baz', ...