7OK

Outils du site

La persévérance est un talisman pour la vie. [Proverbe Africain]
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] – [*ngIf] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 81: Ligne 81:
 ==== *ngIf ==== ==== *ngIf ====
  
 +Micro syntax:
 <code> <code>
-<p *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 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