7OK

Outils du site

Avec trop on se perd. Avec moins on se trouve. []
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/04 02:03] – [Event binding (event)] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 75: Ligne 75:
 <!-- phone refers to the input element; pass its `value` to an event handler --> <!-- phone refers to the input element; pass its `value` to an event handler -->
 <button (click)="callPhone(phone.value)">Call</button> <button (click)="callPhone(phone.value)">Call</button>
 +</code>
 +
 +===== Directives structurelles =====
 +
 +==== *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:
 +<code>
 +<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
 +  ({{i}}) {{hero.name}}
 +</div>
 +</code>
 +
 +Equivalent full syntax:
 +<code>
 +<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
 +  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
 +</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/04 02:03

Outils de la page