Control HTML Rendering

Adding / Removing elements

<div *ngIf="course.length"></div>

Showing / Hiding elements

<div [hidden]="!course.length"></div>

ngSwitch

<div [ngSwitch]=“viewMode”>
    <template [ngSwitchWhen]=“‘map’” ngSwitchDefault> … </template>
    <template [ngSwitchWhen]=“‘list’”> … </template>
</div>

ngSwitch Demo

<ul class="nav nav-pills">
    <li [class.active]="viewMode == 'map'">
        <a (click)="viewMode = 'map'">Map</a>
    </li>
    <li [class.active]="viewMode == 'list'">
        <a (click)="viewMode = 'list'">List</a>
    </li>
</ul>        
<div [ngSwitch]="viewMode">
    <template [ngSwitchWhen]="'map'">
        <h2>Map content </h2>
     </template>
    <template [ngSwitchWhen]="'list'" ngSwitchDefault>
        <h2>List content </h2>
     </template>
</div>

ngFor

import {Component} from "angular2/core";

@Component({
    selector: "app",
    template: `
    <ul>
        <li *ngFor='#course of courses, #i=index'>
            {{ i + 1 }} - {{ course }}
        </li>    
    </ul>
`
})

export class MyApp{
    courses = ["Java", "ES6", "Node JS", "Mongo DB"];
}

Why Leading Asterisk

Without Asterisk

<li *ngFor='#course of courses, #i=index'>
    {{ i + 1 }} - {{ course }}
</li>

With Asterisk

<li ngFor [ngForOf]='courses' #course #i=index>
    {{ i + 1 }} - {{ course }}
</li>

Elvis operator

whatever could be null make that optional with ?

{{ task.assignee?.role?.name }}