7OK

Outils du site

Le désordre c'est l'ordre vu différement. [Hyren]
Vous êtes ici : 7OK » Tⓞⓞls » Angular
56-tools:angular

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
56-tools:angular [2018/04/08 20:45] – [*ngIf] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 108: Ligne 108:
 </code> </code>
  
-==== *ngFor ====+==== ngSwitch  ====
  
 Micro code: Micro code:
 <code> <code>
-<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd"> +<div [ngSwitch]="hero?.emotion"> 
-  ({{i}}) {{hero.name}}+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero> 
 +  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero> 
 +  <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero> 
 +  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
 </div> </div>
 </code> </code>
Ligne 119: Ligne 122:
 Equivalent full syntax: Equivalent full syntax:
 <code> <code>
-<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"> +<div [ngSwitch]="hero?.emotion"> 
-  <div [class.odd]="odd">({{i}}) {{hero.name}}</div> +  <ng-template [ngSwitchCase]="'happy'"> 
-</ng-template>+    <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>
 </code> </code>
 ===== Input and Output properties ===== ===== Input and Output properties =====
Dernière modification : 2018/04/08 20:45

Outils de la page