110 lines
2.4 KiB
HTML
110 lines
2.4 KiB
HTML
|
<!-- #docplaster -->
|
||
|
|
<!-- #docregion -->
|
||
|
|
<h1>Structural Directives</h1>
|
||
|
|
|
||
|
|
<!-- #docregion structural-directives -->
|
||
|
|
<!-- #docregion asterisk -->
|
||
|
|
<div *ngIf="hero">{{hero}}</div>
|
||
|
|
<div *ngFor="#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="#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="#hero of heroes">{{ hero }}</div>
|
||
|
|
|
||
|
|
<!-- (B) ngFor with template -->
|
||
|
|
<template ngFor #hero [ngForOf]="heroes">
|
||
|
|
<div>{{ hero }}</div>
|
||
|
|
</template>
|
||
|
|
<!-- #enddocregion ngFor-template -->
|
||
|
|
<!-- #enddocregion -->
|