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

<p>Conditional display of hero</p>

<blockquote>
<!-- #docregion asterisk -->
<div *ngIf="hero" class="name">{{hero.name}}</div>
<!-- #enddocregion asterisk -->
</blockquote>

<p>List of heroes</p>

<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

<hr>

<h2 id="ngIf">NgIf</h2>

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>
<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

<h4>NgIf with template</h4>
<p>&lt;ng-template&gt; element</p>
<!-- #docregion ngif-template -->
<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>
<!-- #enddocregion ngif-template -->

<hr>

<h2 id="ng-container">&lt;ng-container&gt;</h2>

<h4>*ngIf with a &lt;ng-container&gt;</h4>

<button type="button" (click)="hero = hero ? null : heroes[0]">Toggle hero</button>

<!-- #docregion ngif-ngcontainer -->
<p>
  I turned the corner
  <ng-container *ngIf="hero">
    and saw {{hero.name}}. I waved
  </ng-container>
  and continued on my way.
</p>
<!-- #enddocregion ngif-ngcontainer -->

<p>
  I turned the corner
  <span *ngIf="hero">
    and saw {{hero.name}}. I waved
  </span>
  and continued on my way.
</p>

<p><i>&lt;select&gt; with &lt;span&gt;</i></p>

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

<p><i>&lt;select&gt; with &lt;ng-container&gt;</i></p>
<!-- #docregion select-ngcontainer -->
<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>
<!-- #enddocregion select-ngcontainer -->
<br><br>

<hr>

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

<div class="box">

<p class="code">&lt;div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd"&gt;</p>
<!--#docregion inside-ngfor -->
<div
  *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById"
  [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

<!--#enddocregion inside-ngfor -->
<p class="code">&lt;ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"/&gt;</p>
<!--#docregion inside-ngfor -->
<ng-template ngFor let-hero [ngForOf]="heroes"
  let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">
    ({{i}}) {{hero.name}}
  </div>
</ng-template>
<!--#enddocregion inside-ngfor -->

</div>
<hr>

<h2 id="ngSwitch">NgSwitch</h2>

<div>Pick your favorite hero</div>
<p>
  <label *ngFor="let h of heroes">
    <input type="radio" name="heroes" [(ngModel)]="hero" [value]="h">{{h.name}}
  </label>
  <label><input type="radio" name="heroes" (click)="hero = null">None of the above</label>
</p>

<h4>NgSwitch</h4>

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

<h4>NgSwitch with &lt;ng-template&gt;</h4>
<div [ngSwitch]="hero?.emotion">
  <ng-template ngSwitchCase="happy">
    <app-happy-hero [hero]="hero!"></app-happy-hero>
  </ng-template>
  <ng-template ngSwitchCase="sad">
    <app-sad-hero [hero]="hero!"></app-sad-hero>
  </ng-template>
  <ng-template ngSwitchCase="confused">
    <app-confused-hero [hero]="hero!"></app-confused-hero>
  </ng-template >
  <ng-template ngSwitchDefault>
    <app-unknown-hero [hero]="hero!"></app-unknown-hero>
  </ng-template>
</div>

<hr>


<h2 id="appUnless">UnlessDirective</h2>
<!-- #docregion toggle-info -->
<p>
  The condition is currently
  <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
  <button
    type="button"
    (click)="condition = !condition"
    [ngClass] = "{ 'a': condition, 'b': !condition }" >
    Toggle condition to {{condition ? 'false' : 'true'}}
  </button>
</p>
<!-- #enddocregion toggle-info -->

<!-- #docregion appUnless-->
<p *appUnless="condition" class="unless a">
  (A) This paragraph is displayed because the condition is false.
</p>

<p *appUnless="!condition" class="unless b">
  (B) Although the condition is true,
  this paragraph is displayed because appUnless is set to false.
</p>
<!-- #enddocregion appUnless-->


<h4>UnlessDirective with template</h4>

<!-- #docregion appUnless-1 -->
<p *appUnless="condition">Show this sentence unless the condition is true.</p>
<!-- #enddocregion appUnless-1 -->

<p *appUnless="condition" class="code unless">
  (A) &lt;p *appUnless="condition" class="code unless"&gt;
</p>

<ng-template [appUnless]="condition">
  <p class="code unless">
    (A) &lt;ng-template [appUnless]="condition"&gt;
  </p>
</ng-template>

<hr />

<h2 id="appIfLoaded">IfLoadedDirective</h2>
<app-hero></app-hero>

<hr />

<h2 id="appTrigonometry">TrigonometryDirective</h2>

<!-- #docregion appTrigonometry -->
<ul *appTrigonometry="30; sin as s; cos as c; tan as t">
  <li>sin(30°): {{ s }}</li>
  <li>cos(30°): {{ c }}</li>
  <li>tan(30°): {{ t }}</li>
</ul>
<!-- #enddocregion appTrigonometry -->