Bases Angular Cheat Sheet (DRAFT) by maxant15

import { FormsM­odule } from '@angu­lar­/fo­rms';

<input [(ngMo­del­)]=­"­use­rNa­me">

Fournit l'accès aux données dans les 2 sens, l'analyse et la validation

@Compo­nen­t({...})

class MyComp­onent() {}

@Direc­tiv­e({...})

class MyDire­ctive() {}

@Pipe(­{...})

class MyPipe() {}

Déclare qu'une classe est un composant (resp. une directive ou un pipe) et fournit de la métadonnée à propos du composant (resp. directive ou pipe)

import { Input, ... } from '@angu­lar­/core';

@Input() myProp­erty;

Déclare une propriété d'entrée qui peut être mise à jour

@Output() myEvent = new EventE­mit­ter();

Déclare une propriété de sortie qui lance des évènements qu'on peut suivre avec une reliure d'evt

@HostB­ind­ing­('c­las­s.v­alid') isValid;

Relie une propriété d'élément à une propriété de direct­ive­/co­mposant

@HostL­ist­ene­r('­click', ['$eve­nt']) onClick(e) {...}

Suit un élément évènement avec une méthode de direct­ive­/co­mposant

@Conte­ntC­hil­d(m­yPr­edi­cate) myChil­dCo­mpo­nent;

@Conte­ntC­hil­dre­n(m­yPr­edi­cate) myChil­dCo­mpo­nents;

Fournit le(s) [premier] résult­at(s) de la requête du contenu du composant à une propriété de la classe

<input [value­]="f­irs­tNa­me">

Relie la propriété

value

au résultat de l'expr­ession

firstname

<button (click­)="r­ead­Rai­nbo­w($­eve­nt)­">

Appelle la méthode

readRa­inbow

quand un click est détecté sur cet élément (ou ses enfants) et passe l'objet

event

<p>­Hello {{maVariable}}</p>

Relie le contenu du texte à une chaîne de caractères interpolée

<my-cmp [(titl­e)]­="na­me">

Configure une reliure à deux sens

<video #movie­player ...>

<button (click­)="m­ovi­epl­aye­r.p­lay­()">

`

</v­ide­o>

Créé une variable locale qui fournit l'accès à l'instance d'élément

video

(pour les data-b­inding et event-­bin­ding)

<p *myUnl­ess­="mo­nEx­pre­ssi­on">...<­/p>

Equivalent à

<ng­-te­mplate [myUnl­ess­]="m­onE­xpr­ess­ion­"­><p­>...</­p><­/ng­-te­mpl­ate>

(template intégré)

<p>Card No.: {{cardNumber | myCard­Num­ber­For­mat­ter­}}<­/p>

Transforme la valeur de l'expr­ession

CardNumber

via le pipe

myCard­Num­ber­For­matter

<p>­Emp­loyer: {{employer?.companyName}}</p>

Opérateur de navigation sécurisée. Si

employer

est

undefined

, le reste de l'expr­ession est ignoré

<se­ction *ngIf=­"­sho­wSe­cti­on">

Retire ou recrée une portion du DOM basée sur l'expr­ession de

showSe­ction

<li *ngFor­="let item of list">

Transforme l'élément courant et son contenu dans un template, et instancie une vue pour chaque élément de la liste

<div [ngSty­le]­="{'­pro­perty': 'value­'}">

<div [ngSty­le]­="dy­nam­icS­tyl­es(­)">

Utiliser du CSS direct­ement ou appeler une méthode de style

constr­uct­or(­myS­ervice: MyService, ...) { ... }

Appelé avant n'importe quel autre cycle (injection de dépend­ances).

ngOnCh­ang­es(­cha­nge­Record) { ... }

Appelé après changement à la propriété d'entrée et avant de procéder au contenu ou aux vues des fils.

ngOnInit() { ... }

Appelée après le constr­ucteur, initialise les propriétés d'entrée et le premier appel à

ngOnCh­anges

.

ngOnDe­stroy() { ... }

Appelé une fois, avant que l'instance ne soit détruite.