<p>Message: {{ msg }}</p>
<p [innerHTML]="msg"></p>

<!-- 寫法一 -->
<img src="{{ heroImageUrl }}">
<!-- 寫法二，推薦 -->
<img [src]="heroImageUrl">
<!-- 寫法三 -->
<img bind-src="heroImageUrl">

<button [disabled]="isButtonDisabled">Button</button>

<p>1 + 1 = {{ 1 + 1 }}</p>
<p>{{ num + 1 }}</p>
<p>{{ isDone ? '完了' : '沒完' }}</p>
<p>{{ title.split('').reverse().join('') }}</p>
<p [title]="title.split('').reverse().join('')">{{ title }}</p>
<ul>
  <li [id]="'list-' + t.id" *ngFor="let t of todos">
    {{ t.title }}
  </li>
</ul>

export class AppComponent {
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
}

<p>Heroes:</p>
<ul>
  <li *ngFor="let hero of heroes">
    {{ hero }}
  </li>
</ul>

<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>

<p *ngIf="heroes.length > 3">There are many heroes!</p>

<ng-template [ngIf]="condition"><div>...</div></ng-template>

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
</div>

<button (click)="onSave()">Save</button>

<button (click)="onSave($event)">On Save</button>

<button (click)="onSave($event, 123)">On Save</button>

<button (click)="message = '哈哈哈'">內聯(lián)事件處理</button>

<input [value]="message"
       (input)="message=$event.target.value" >

<!-- 綁定事件處理函數(shù) -->
<button on-click="onSave()">On Save</button>

<p>{{ message }}</p>
<input type="text" [(ngModel)]="message">

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+++ import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
+++ FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<textarea cols="30" rows="10" [(ngModel)]="message"></textarea>

<h3>單選框</h3>
<input type="checkbox" [(ngModel)]="seen">
<div class="box" *ngIf="seen"></div>

<input type="radio" [value]="0" [(ngModel)]="gender"> 男
<input type="radio" [value]="1" [(ngModel)]="gender"> 女
<p>選中了：{{ gender }}</p>

<select [(ngModel)]="hobby">
  <option [value]="0">吃飯</option>
  <option [value]="1">睡覺</option>
  <option [value]="2">打豆豆</option>
</select>
<p>選中的愛好：{{ hobby }}</p>

<!-- standard class attribute setting  -->
<div class="bad curly special">Bad curly special</div>
<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>
<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

<div [ngClass]="{
  css類名: 布爾值,
  css類名: 布爾值
}">測試文本</div>

.saveable{
    font-size: 18px;
} 
.modified {
    font-weight: bold;
}
.special{
    background-color: #ff3300;
}

currentClasses: {};
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
  };
}

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<!-- 也可以 backgroundColor -->
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

currentStyles: {};
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

<input #phone placeholder="phone number">

<input #phone placeholder="phone number">
<!-- lots of other elements -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

public currentTime: Date = new Date();

<h1>{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}</h1>