Angular built-in命令はattribute命令とstructural命令の2種類に分けられる.

Attribute命令

最も一般的なattribute命令はNgClass,NgStyle,NgModelの3種類である.

NgClass

htmlラベルのcssクラスを動的に追加または削除します.
例:

<div [ngClass]="isSpecial ? 'special' : ''">This div is specialdiv>

isSpecialがtrueの場合、divタグにspecialのcssクラスが付けられます.
もっと複雑な例です

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

divのclassはComponentのpropertyにバインドされ、currentClassesと呼ばれています.
Componentの実装コードでは、currentclassesの付与ロジック:

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

NgModel

例:

<label for="example-ngModel">[(ngModel)]:label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">

上は実際には双方向にバインドされた文法糖で、以下に等価です.

<label for="without">without NgModel:label>
<input [value]="currentItem.name" (input)="currentItem.name=$event.target.value" id="without">

Structural命令

ngIf

例:

<div *ngIf="hero" class="name">{{hero.name}}div>

実際には文法糖で、以下に等価です.

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}div>
ng-template>

ngFor

例:

<app-item-detail *ngFor="let item of items" [item]="item">app-item-detail>

let item of itemsの意味:Take each item in the items array,store it in the local item looping variable,and make it available to the templated HTML for each iteration.
ngFor命令には、組み込み属性indexがあります.

<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}div>

上記の例では、index属性をtemplate変数iに付与.