angular-cn/aio/content/examples/built-in-directives/src/app/app.component.html

<h1>Built-in Directives</h1>

<h2>Built-in attribute directives</h2>

<h3 id="ngModel">NgModel (two-way) Binding</h3>

<fieldset><h4>NgModel examples</h4>
  <p>Current item name: {{currentItem.name}}</p>
  <p>
    <label for="without">without NgModel:</label>
    <input [value]="currentItem.name" (input)="currentItem.name=$event.target.value" id="without">
  </p>

  <p>
    <!-- #docregion NgModel-1 -->
    <label for="example-ngModel">[(ngModel)]:</label>
    <input [(ngModel)]="currentItem.name" id="example-ngModel">
    <!-- #enddocregion NgModel-1 -->
  </p>

  <p>
    <label for="example-bindon">bindon-ngModel: </label>
    <input bindon-ngModel="currentItem.name" id="example-bindon">
  </p>

  <p>
    <label for="example-change">(ngModelChange)="...name=$event":</label>
    <input [ngModel]="currentItem.name" (ngModelChange)="currentItem.name=$event" id="example-change">
  </p>

  <p>
    <label for="example-uppercase">(ngModelChange)="setUppercaseName($event)"
      <!-- #docregion uppercase -->
      <input [ngModel]="currentItem.name" (ngModelChange)="setUppercaseName($event)" id="example-uppercase">
      <!-- #enddocregion uppercase -->
    </label>
  </p>
</fieldset>

<hr><h2 id="ngClass">NgClass Binding</h2>

<p>currentClasses is {{currentClasses | json}}</p>
<!-- #docregion NgClass-1 -->
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>
<!-- #enddocregion NgClass-1 -->
<ul>
  <li>
    <label for="saveable">saveable</label>
    <input type="checkbox" [(ngModel)]="canSave" id="saveable">
  </li>
  <li>
    <label for="modified">modified:</label>
    <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged" id="modified"></li>
  <li>
    <label for="special">special: <input type="checkbox" [(ngModel)]="isSpecial" id="special"></label>
</li>
</ul>
<button (click)="setCurrentClasses()">Refresh currentClasses</button>

<div [ngClass]="currentClasses">
  This div should be {{ canSave ? "": "not"}} saveable,
                  {{ isUnchanged ? "unchanged" : "modified" }} and
                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
<br><br>
<!-- #docregion special-div -->
<!-- toggle the "special" class on/off with a property -->
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
<!-- #enddocregion special-div -->
<div class="helpful study course">Helpful study course</div>
<div [ngClass]="{'helpful':false, 'study':true, 'course':true}">Study course</div>


<!-- NgStyle binding -->
<hr><h3>NgStyle Binding</h3>
<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'">
  This div is x-large or smaller.
</div>

<h4>[ngStyle] binding to currentStyles - CSS property names</h4>
<p>currentStyles is {{currentStyles | json}}</p>

<!-- #docregion NgStyle-2 -->
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>
<!-- #enddocregion NgStyle-2 -->



<br>
<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
<button (click)="setCurrentStyles()">Refresh currentStyles</button>
<br><br>
<div [ngStyle]="currentStyles">
  This div should be {{ canSave ? "italic": "plain"}},
                  {{ isUnchanged ? "normal weight" : "bold" }} and,
                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>

<hr>
<h2>Built-in structural directives</h2>
<h3 id="ngIf">NgIf Binding</h3>
<div>
  <p>If isActive is true, app-item-detail will render: </p>
  <!-- #docregion NgIf-1 -->
  <app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>
  <!-- #enddocregion NgIf-1 -->

  <button (click)="isActiveToggle()">Toggle app-item-detail</button>
</div>
<p>If currentCustomer isn't null, say hello to Laura:</p>
<!-- #docregion NgIf-2 -->
<div *ngIf="currentCustomer">Hello, {{currentCustomer.name}}</div>
<!-- #enddocregion NgIf-2 -->
<p>nullCustomer is null by default. NgIf guards against null. Give it a value to show it:</p>
<!-- #docregion NgIf-2b -->
<div *ngIf="nullCustomer">Hello, <span>{{nullCustomer}}</span></div>
<!-- #enddocregion NgIf-2b -->
<button (click)="giveNullCustomerValue()">Give nullCustomer a value</button>


<h4>NgIf binding with template (no *)</h4>

<ng-template [ngIf]="currentItem">Add {{currentItem.name}} with template</ng-template>
<hr>

<h4>Show/hide vs. NgIf</h4>
<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>

<p>ItemDetail is in the DOM but hidden</p>
<app-item-detail [class.hidden]="isSpecial"></app-item-detail>

<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>


<hr>
<h2 id="ngFor">NgFor Binding</h2>

<div class="box">
  <!-- #docregion NgFor-1, NgFor-1-2 -->
  <div *ngFor="let item of items">{{item.name}}</div>
  <!-- #enddocregion NgFor-1, NgFor-1-2 -->
</div>

<p>*ngFor with ItemDetailComponent element</p>
<div class="box">
  <!-- #docregion NgFor-2, NgFor-1-2 -->
  <app-item-detail *ngFor="let item of items" [item]="item"></app-item-detail>
  <!-- #enddocregion NgFor-2, NgFor-1-2 -->
</div>


<h4 id="ngFor-index">*ngFor with index</h4>
<p>with <i>semi-colon</i> separator</p>
<div class="box">
  <!-- #docregion NgFor-3 -->
  <div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>
  <!-- #enddocregion NgFor-3 -->
</div>

<p>with <i>comma</i> separator</p>
<div class="box">
 <div *ngFor="let item of items, let i=index">{{i + 1}} - {{item.name}}</div>
</div>

<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
<button (click)="resetList()">Reset items</button>
<button (click)="changeIds()">Change ids</button>
<button (click)="clearTrackByCounts()">Clear counts</button>

<p><i>without</i> trackBy</p>
<div class="box">
  <div #noTrackBy *ngFor="let item of items">({{item.id}}) {{item.name}}</div>

  <div id="noTrackByCnt" *ngIf="itemsNoTrackByCount" >
    Item DOM elements change #{{itemsNoTrackByCount}} without trackBy
  </div>
</div>

<p>with trackBy</p>
<div class="box">
  <div #withTrackBy *ngFor="let item of items; trackBy: trackByItems">({{item.id}}) {{item.name}}</div>

  <div id="withTrackByCnt" *ngIf="itemsWithTrackByCount">
    Item DOM elements change #{{itemsWithTrackByCount}} with trackBy
  </div>
</div>

<br><br><br>

<p>with trackBy and <i>semi-colon</i> separator</p>
<div class="box">
  <!-- #docregion trackBy -->
  <div *ngFor="let item of items; trackBy: trackByItems">
    ({{item.id}}) {{item.name}}
  </div>
  <!-- #enddocregion trackBy -->
</div>

<p>with trackBy and <i>comma</i> separator</p>
<div class="box">
  <div *ngFor="let item of items, trackBy: trackByItems">({{item.id}}) {{item.name}}</div>
</div>

<p>with trackBy and <i>space</i> separator</p>
<div class="box">
  <div *ngFor="let item of items trackBy: trackByItems">({{item.id}}) {{item.name}}</div>
</div>

<p>with <i>generic</i> trackById function</p>
<div class="box">
  <div *ngFor="let item of items, trackBy: trackById">({{item.id}}) {{item.name}}</div>
</div>

<hr><h2>NgSwitch Binding</h2>

<p>Pick your favorite item</p>
<div>
  <label *ngFor="let i of items">
    <div><input type="radio" name="items" [(ngModel)]="currentItem" [value]="i">{{i.name}}
    </div>
  </label>
</div>

<!-- #docregion NgSwitch -->
<div [ngSwitch]="currentItem.feature">
  <app-stout-item    *ngSwitchCase="'stout'"    [item]="currentItem"></app-stout-item>
  <app-device-item   *ngSwitchCase="'slim'"     [item]="currentItem"></app-device-item>
  <app-lost-item     *ngSwitchCase="'vintage'"  [item]="currentItem"></app-lost-item>
  <app-best-item     *ngSwitchCase="'bright'"   [item]="currentItem"></app-best-item>
<!-- #enddocregion NgSwitch -->
  <!-- #docregion NgSwitch-div -->
  <div *ngSwitchCase="'bright'"> Are you as bright as {{currentItem.name}}?</div>
  <!-- #enddocregion NgSwitch-div -->
<!-- #docregion NgSwitch -->
  <app-unknown-item  *ngSwitchDefault           [item]="currentItem"></app-unknown-item>
</div>
<!-- #enddocregion NgSwitch -->