41 lines
1.3 KiB
HTML
41 lines
1.3 KiB
HTML
|
<div class="container">
|
||
|
|
<h1>Reactive Forms</h1>
|
||
|
|
<h4><i>Pick a demo:</i>
|
||
|
|
<select [selectedIndex]="demo - 1" (change)="selectDemo($event.target.selectedIndex)">
|
||
|
|
<option *ngFor="let demo of demos">{{demo}}</option>
|
||
|
|
</select>
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="demo">
|
||
|
|
<hero-list *ngIf="demo===final"></hero-list>
|
||
|
|
<hero-detail-1 *ngIf="demo===1"></hero-detail-1>
|
||
|
|
<hero-detail-2 *ngIf="demo===2"></hero-detail-2>
|
||
|
|
<hero-detail-3 *ngIf="demo===3"></hero-detail-3>
|
||
|
|
<hero-detail-4 *ngIf="demo===4"></hero-detail-4>
|
||
|
|
<hero-detail-5 *ngIf="demo===5"></hero-detail-5>
|
||
|
|
|
||
|
|
<div *ngIf="demo >= 6 && demo !== final" >
|
||
|
|
|
||
|
|
<h3 *ngIf="isLoading"><i>Loading heroes ... </i></h3>
|
||
|
|
<h3 *ngIf="!isLoading">Select a hero:</h3>
|
||
|
|
|
||
|
|
<nav>
|
||
|
|
<button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
|
||
|
|
<a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div *ngIf="selectedHero">
|
||
|
|
<hr>
|
||
|
|
<h2>Hero Detail</h2>
|
||
|
|
<h3>Editing: {{selectedHero.name}}</h3>
|
||
|
|
<hero-detail-6 [hero]=selectedHero *ngIf="demo===6"></hero-detail-6>
|
||
|
|
<hero-detail-7 [hero]=selectedHero *ngIf="demo===7"></hero-detail-7>
|
||
|
|
<hero-detail-8 [hero]=selectedHero *ngIf="demo===8"></hero-detail-8>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|