7OK

Outils du site

Ne dites pas: \"J'ai trouvé la vérité\", mais plutôt: \"J'ai trouvé une vérité\". Ne dites pas: \"J'ai trouvé le chemin de l'âme\". Dites plutôt: \"J'ai rencontré l'âme marchant sur mon chemin\". Car l'âme marche sur tous les chemins.L'âme ne marche pas sur une ligne de crête, pas plus qu'elle ne croit tel un roseau.L'âme se déploie, comme un lotus aux pétales innombrables. [Khalil GIBRAN]
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:43] – [NgFor] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 81: Ligne 81:
 ==== *ngIf ==== ==== *ngIf ====
  
 +Micro syntax:
 +<code>
 +<div *ngIf="hero" class="name">{{hero.name}}</div>
 +</code>
  
-<p *ngIf="true"> +Equivallent full syntax: 
-  Expression is true and ngIf is true. +<code> 
-  This paragraph is in the DOM. +<ng-template [ngIf]="hero"> 
-</p> +  <div class="name">{{hero.name}}</div> 
 +</ng-template> 
 +</code>
 ==== *ngFor ==== ==== *ngFor ====
  
Ligne 101: 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:43

Outils de la page