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.


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

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

Get Angular 2 Cookbook now with the O’Reilly learning platform.

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