n
Role StgArieure Polyiechnique
inirelationcd. Privi. de 54o
Chapitre
DATABIDING
Le
da
ta
bi
nd
in
g
L'interet
d'utiliser
Angular est de
pouvoir gerer
le DOM de
maniere
dynamique, et
pour vela, it
fact utiliser Ia
liaison de
donnees, ou
"databinding".
Le databinding, est Ia
HTML Code
pi (View)
communication entre le
code TypeScript et le
template HTML.
String Interpolation
Property Binding
Event Binding
Two Way Binding
r I
Type Script
Code
(Business Log
<
_____
—A
2
Le databinding
Cette communication est divisee en 2 directions :
Les informations venant du code qui doivent etre affichees dans le
navigateur (ex : des informations de calcul ou recuperees sur un
serveur). Les deux principales methodes pour vela scent le "string
interpolation" {{ }} et le "property binding" [ .
Exemple: string interpolation
appareilName= 'Machine layer"; Typescript
appareilStatus= "eteint';
getStatus() { return this.appareilStatus;}
Template html <h4>Appareil:{{appareilName}} -- Status : IfgetStatusffil<M4>
Exemple: property binding
Typescript isAuth = false;
<button class="btn btn-success" [disabled]="lisAuth"
Template html
</button> <div [align]="alignement"
[ngStyle]="icolorcouleur}"></div>
Le databinding
Les informations venant du template qui doivent etre gerees par le
code (ex : formulaire) et it fact reagir et gerer ces evenements. On
parlera de "event binding" ( ).
II existe egalement des situations o6 l'on voudra une communication
a double sens on parle dons de « two-way binding >>
Typescript onAllumer0 console.log('On allumetoutl;
<button class="btn btn-success" (click)="onAllumer()">Tout
Template html
Allumer</button>
Typescript appa reil Name : string;
<input type="text" class="form-control"
Template html [(ngModel)]="appareilName">
Creation du composant
Pour creer un composant, on utilise la commande ng avec I'option
generate et le parametre component
ng generate component about
Voici la meme commande en ecriture abregee
ng g c about
Le template HTML
On modifie le template HTML pour qu'il interpole la variable
definie dans la classe entre les 2 balises <label> et </label>
<label> {{message}} </label>
La feuille de style
On tree la feuille de style pour definir Ia taille de Ia police qui
affiche le message
label { font-size: 18pt; }
Interfacage du composant dans
le composant racine
Le nouveau composant dolt maintenant etre integre dans le
template du composant « point dientree » en utilisant Ia balise
portant le nom du selecteur clecrit dans Ia classe TypeScript.
On modifie le fichier « app.component.html » pour ne garder que le
code suivant
<hi>
{{title}}
h i> <app-about></app-
about>
Specification des composants
dans le module
Pour utiliser un composant, ce dernier dolt etre declare
dans le module « App.module.ts >.
Cornme le montre le code, on a 2 composants declares
AppComponent, associe a la classe stockee dans le
fichier
app.component.ts.
AboutComponent, associe a la classe stockee dans le
fichier
aboutiabout.component.ts.
Dans le code, le suffixe .ts des fichiers est amis.
import { BrowserModule } from r@angulariplatform-browser';
import{ NgModule } from r@angular/corer;
import { AppComponent from Vapp.componentr;
import { AboutComponent }from './about/about.component';
@NgModule({
declarations: [
AppComponent,
AboutComponent
] ►
imports: [BrowserModule], providers:
[],
bootstrap: [AppComponent] }) export class
AppModule
