7OK

Outils du site

La laïcité est l'acceptation de toutes les opinions et de tous les comportements qui savent respecter l'autre. L'unicité de Dieu propose par le pharaon Akhenaton est en fait la base de la laïcité. Il n'est plus question de s'entre-déchirer au nom d'une multitude de divinités, mais de constater l'unicité de l'espèce humaine dans son devenir. [Albert Jacquard]
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/03 11:35] – [Testing] Roge56-tools:angular [2018/04/08 20:48] (Version actuelle) – [*ngFor] Roge
Ligne 57: Ligne 57:
  
   * ''<button **(click)**="onSave()">Save</button>''   * ''<button **(click)**="onSave()">Save</button>''
-  * ''<button **on-click**="onSave()">On Save</button>''+  * ''<button **on-click**="onSave()">Save</button>''
  
  
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/03 11:35

Outils de la page