https://cli.angular.io/

Doc

https://medium.com/@MarkPieszak/using-pug-or-jade-templates-with-the-angular-cli-9e37334db5bc

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

http://embed.plnkr.co/4eXHag

{{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:

• Declaration: @Input() hero: Hero;
• Usage: <app-hero-detail [hero]=“selectedHero”></app-hero-detail>
• Autre forme d'écriture: 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:

• Components directives: with a template.
• Structural directives: change the DOM layout by adding and removing DOM elements.
• Attribute directives: change the appearance or behavior of an element, component, or another directive.

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/

https://stackblitz.com/edit/ng-countdown-timer

https://stackblitz.com/edit/ng-material-dialog-test