7OK

Outils du site

Laissons les jolies femmes aux hommes sans imagination. [Proust]
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
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

Outils de la page