https://blog.angularindepth.com/
https://material.angular.io/components/categories
test dialog: https://stackblitz.com/edit/angular-sqspai?file=app%2Fdialog-overview-example-dialog.html
[(ngModel)] | Two-way data binding. |
[property] | Property binding. |
(event) | Event binding |
{{variable}} interpolation. Les deux formes ci-dessous sont équivalentes:
<img src=“{{heroImageUrl}}”> is the interpolated image.<img [src]=“heroImageUrl”> is the property bound image.It flows a value in one direction, from a component's data property into a target element property.
You cannot use property binding to pull values out of the target element.
You can't bind to a property of the target element to read it. You can only set it.
Les deux formes ci-dessous sont équivalentes:
<button (click)=“onSave()”>Save</button><button on-click=“onSave()”>Save</button>You often want to both display a data property and update that property when the user makes changes.
variable locale qui peut être utilisée par la suite :
<input #phone placeholder="phone number"> <!-- phone refers to the input element; pass its `value` to an event handler --> <button (click)="callPhone(phone.value)">Call</button>
Micro syntax:
<div *ngIf="hero" class="name">{{hero.name}}</div>
Equivallent full syntax:
<ng-template [ngIf]="hero">
<div class="name">{{hero.name}}</div>
</ng-template>
Micro code:
<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
({{i}}) {{hero.name}}
</div>
Equivalent full syntax:
<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>
Micro 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>
Equivalent full syntax:
<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>
An Input property is a settable property annotated with an @Input() decorator. Values flow into the property when it is data bound with a property binding [property].
Exemple:
@Input() hero: Hero;<app-hero-detail [hero]=“selectedHero”></app-hero-detail>bind-hero=“selectedHero”
An Output property is an observable property annotated with an @Output() decorator. The property almost always returns an Angular EventEmitter. Values flow out of the component as events bound with an event binding (event).
There are three kinds of directives in Angular:
https://psamsotha.github.io/angular/2016/12/16/angular2-testing-karma-systemjs.html
https://jasmine.github.io/api/edge/matchers.html
https://github.com/mgechev/angular-performance-checklist
https://blog.oasisdigital.com/2017/angular-runtime-performance-guide/