Outils du site

Il y a des fanatiques de sang-froid: ce sont les juges qui condamnent la mort ceux qui n'ont d'autre crime que de ne pas penser comme eux; et ces juges-là sont d'autant plus coupables, d'autant plus dignes de l'exécration du genre humain, que, n'étant pas dans un accés de fureur comme les Clément, les Chastel, les Ravaillac, les Damiens, il semble qu'ils pourraient écouter la raison. [Voltaire]

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
Prochaine révision
Révision précédente
56-tools:angular [2018/04/08 20:41] – [Template reference variables ( #var )] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 79: Ligne 79:
 ===== Directives structurelles ===== ===== Directives structurelles =====
  
-==== NgFor ====+==== *ngIf ==== 
 + 
 +Micro syntax: 
 +<code> 
 +<div *ngIf="hero" class="name">{{hero.name}}</div> 
 +</code> 
 + 
 +Equivallent full syntax: 
 +<code> 
 +<ng-template [ngIf]="hero"> 
 +  <div class="name">{{hero.name}}</div> 
 +</ng-template> 
 +</code> 
 +==== *ngFor ====
  
 Micro code: Micro code:
Ligne 93: Ligne 106:
   <div [class.odd]="odd">({{i}}) {{hero.name}}</div>   <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
 </ng-template> </ng-template>
 +</code>
 +
 +==== ngSwitch  ====
 +
 +Micro code:
 +<code>
 +<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="'app-confused'" [hero]="hero"></app-confused-hero>
 +  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
 +</div>
 +</code>
 +
 +Equivalent full syntax:
 +<code>
 +<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>
 </code> </code>
 ===== Input and Output properties ===== ===== Input and Output properties =====
Dernière modification : 2018/04/08 20:41