Outils du site

L'astronome peut vous parler de son entendement de l'espace. Il ne peut vous donner son entendement. Le musicien peut vous interpréter le rythme qui régit tout espace. Il ne peut vous donner l'ouïe qui capte le rythme, ni la voix qui lui fait écho. Celui qui est versé dans la science des nombres peut décrire les régions du poids et de la mesure. Il ne peut vous y emmener. Car la vision d'un être ne prète pas ses ailes à d'autres, De même que chacun de vous se tient seul dans la connaissance de Dieu, chacun de vous doit demeurer seul dans sa connaissance de Dieu et dans son entendement de la terre. [Khalil GIBRAN]

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:44] – [*ngFor] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 81: Ligne 81:
 ==== *ngIf ==== ==== *ngIf ====
  
 +Micro syntax:
 <code> <code>
-<*ngIf="true"> +<div *ngIf="hero" class="name">{{hero.name}}</div
-  Expression is true and ngIf is true. +</code> 
-  This paragraph is in the DOM+ 
-</p>+Equivallent full syntax: 
 +<code> 
 +<ng-template [ngIf]="hero"> 
 +  <div class="name">{{hero.name}}</div> 
 +</ng-template>
 </code> </code>
 ==== *ngFor ==== ==== *ngFor ====
Ligne 103: 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 114: 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:44