angular-cn/public/docs/_examples/structural-directives/ts/app/structural-directives.component.html

<!-- #docplaster -->
<!-- #docregion -->
<h1>Structural Directives</h1>

<!-- #docregion structural-directives -->
<!-- #docregion asterisk -->
<div *ngIf="hero">{{hero}}</div>
<div *ngFor="let hero of heroes">{{hero}}</div>
<!-- #enddocregion asterisk -->
<!-- #docregion ngSwitch -->
<div [ngSwitch]="status">
  <template [ngSwitchWhen]="'in-mission'">In Mission</template>
  <template [ngSwitchWhen]="'ready'">Ready</template>
  <template ngSwitchDefault>Unknown</template>
</div>
<!-- #enddocregion ngSwitch -->
<!-- #enddocregion structural-directives -->

<hr>

<button
  (click)="condition = !condition"
  [style.background] = "condition ? 'orangered': 'lightgreen'"
  >
  Set 'condition' to {{condition ? 'False': 'True'}}
</button>

<!-- #docregion ngIf -->
<p *ngIf="condition">
  condition is true and ngIf is true.
</p>
<p *ngIf="!condition">
  condition is false and ngIf is false.
</p>
<!-- #enddocregion ngIf -->
<!-- #docregion myUnless-->
<p *myUnless="condition">
  condition is false and myUnless is true.
</p>

<p *myUnless="!condition">
  condition is true and myUnless is false.
</p>
<!-- #enddocregion myUnless-->

<hr>

<!-- #docregion message-log -->
<div><!-- Visibility -->
  <button (click)="isVisible = !isVisible">show | hide</button>
  <heavy-loader [style.display]="isVisible ? 'inline' : 'none'" [logs]="logs"></heavy-loader>
</div>

<div><!-- NgIf -->
  <button (click)="condition = !condition">if | !if</button>
  <heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>
</div>

<h4>heavy-loader log:</h4>
<div *ngFor="let message of logs">{{message}}</div>
<!-- #enddocregion message-log -->

<hr>

<!-- #docregion template-tag -->
<p>
  Hip!
</p>
<template>
  <p>
    Hip!
  </p>
</template>
<p>
  Hooray!
</p>
<!-- #enddocregion template-tag -->

<hr>

<!-- #docregion ngIf-template -->
<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>
<!-- #enddocregion ngIf-template -->

<hr>

<!-- #docregion ngFor-template -->
<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngFor div -->
<div *ngFor="let hero of heroes">{{ hero }}</div>

<!-- (B) ngFor with template -->
<template ngFor let-hero [ngForOf]="heroes">
  <div>{{ hero }}</div>
</template>
<!-- #enddocregion ngFor-template -->
<!-- #enddocregion -->