Outils du site

La laïcité est l'acceptation de toutes les opinions et de tous les comportements qui savent respecter l'autre. L'unicité de Dieu propose par le pharaon Akhenaton est en fait la base de la laïcité. Il n'est plus question de s'entre-déchirer au nom d'une multitude de divinités, mais de constater l'unicité de l'espèce humaine dans son devenir. [Albert Jacquard]

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]="heroeslet-i="indexlet-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