Angular 2 – Databinding (liaison de donnée)
Les 4 méthodes de liaison de données sont :
- Interpolation de chaîne (String Interpolation)
- Liaison de propriété (Property Binding)
- Liaison d’événement (Event Binding)
- Liaison bilatérale (Two-Way Binding)
Interpolation de chaîne
Déjà vu avec la paramètre title de la classe AppComponent utilisé dans le template HTML du composant : {{title}}
Liaison de propriété
Ce sont les données de Javascript (ou plutôt Typescript) qui son accessibles dans les templates des composants.
Cette liaison s’applique sur les propriétés du DOM comme : value, hidden, src, alt, …
Exemples de propriétés du DOM :
1 2 3 4 |
<div hidden>Texte secret</div> <button disabled>Votre panier</button> <img alt="Description de l'image"> <img src="image.jpg"> |
Les exemples ci-dessus pourraient apparaitre ainsi dans les templates des composants :
1 2 3 4 |
<div [hidden]="!utilisateur.estAdmin">Texte secret</div> <button [disabled]="estInactif">Votre panier</button> <img [alt]="image.description"> <img [src]="image.nom"> |
Commentaires du code ci-dessus :
- L’élément ‘Texte secret’ est caché si le champ booléen estAdmin de l’objet utilisateur est faux
- L’élément ‘Votre panier’ est désactivé si le booléen estInactif est vrai
- Mettre l’attribut alt à la valeur de l’objet image.description
- Insérer l’image dont le nom est la valeur du champ nom de l’objet image
Autres exemples :
<input name='titre' value='Un titre'>
→ texte fixe ‘Un titre’
<input name='titre' value='{{title}}'>
→ string interpolation detitle
<input name='titre' [value]='title'>
→ property binding devalue
avec la valeur detitle
<input name='titre' bind-value='title'>
→ alternative aux crochets
Liaison de style CSS
Au même titre qu’une liaison de propriété, on peut faire une liaison de classe pour appliquer ou non un style CSS. Ceci se fait à l’aide de la liaison de propriétés spéciales Angular : [ngClass] et [ngStyle].
- Soit bordure une classe définie dans le template CSS du composant.
Le code<p [ngClass]="{bordure : true}">Blabla...</p>
active la classe bordure parce que la valeur de la liaison de propriéténgClass
est àtrue
. On peut remplacertrue
par un appel à une méthode de la classe du composant en question :[ngClass]="{bordure : active()}"
ngStyle
fonctionne plus directement en proposant une liaison à un style explicite directement dans le code :<p [ngStyle]="{color:'blue'}">Blabla...</p>
. Ne pas oublier les apostrophes autour de la valeur de la propriété CSS.
Liaison d’événement
Quand l’interface envoie des événements au code Javascript, comme un clic de souris (click
), un survol de souris (mouseover
) ou une pression sur une touche (keydown
).
Exemple : Un bouton pour incrémenter une donnée :
Dans le template HTML : <button (click)="upQuantite()" > + </button>
Dans le code :
1 2 3 4 5 6 |
export class unComposant { ... upQuantite() { // incrémenter la quantité qd elle ne dépasse pas le stock if (produit.quantite < produit.stock) produit.quantite++; } } |
On peut écouter tout événement standard du DOM (onclick, onmouseover, …) en l’enveloppant entre parenthèses et
enlevant le « on » au début du mot.
Exemples :
1 2 3 4 5 |
<div (mouseover)="appelMethode()"> <input (blur)="appelMethode()"> <input (focus)="appelMethode()"> <input type="text" (keydown)="appelMethode()"> <form (submit)="appelMethode()"> |
Parfois, on a besoin de données supplémentaires d’un événement, comme la touche enfoncée ou les coordonnées de la souris est à l’écran.
L’objet event
est fait pour cela. Le paramètre $event
est transmis aux méthodes :
Dans le template HTML :
1 |
<input type="text" (keydown)="montrerTouche($event)"> |
Dans le code du composant :
1 2 3 |
montrerTouche(event) { alert(event.keyCode); } |
Noter le $ devant event dans l’appel de la méthode, pas dans la définition.
Dans le template HTML :
1 |
<h2 (mouseover)="coords($event)">Survoler</h2> |
Dans le code du composant :
1 2 3 |
coords(event) { console.log(event.clientX + ", " + event.clientY); } |
On peut également appeler event.preventDefault();
pour empêcher un lien cliqué de suivre sa cible ou un formulaire de lancer son action.
Evénements par défaut (cycle de vie d’un composant)
Ces événements s’exécutent automatiquement et permettent d’agir à tous les instants de la vie d’un composant.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
ngOnInit () { // S'exécute après la création du composant. C'est le meilleur endroit où on peut initialiser les propriétés. } ngOnDestroy () { // Comme son nom l'indique. } ngDoCheck () { // Détection de changement personnalisé } ngOnChanges (changements) { // Appelé juste après que nos liaisons de propriétés ont été vérifiées et seulement // si l'une des liaisons a changé. // "changements" est un objet de la forme : {'prop': ProperiétéMàJ} } ngAfterContentInit () { // Le contenu du composant a été initialisé } ngAfterContentChecked () { // Le contenu du composant a été vérifié } ngAfterViewInit () { // Les vues des composants sont initialisées } ngAfterViewChecked () { // Les vues des composants ont été vérifiées } |
Liaison bilatérale
Ou comment peut-on lier les propriétés de notre composant à notre HTML, mais aussi écouter les événements et garder les choses en synchronisation. C’est le cas par exemple d’une zone de texte qui doit rester synchronisée : le code agit sur l’affichage HTML; mais également la manipulation dans l’interface doit agir sur les propriétés du composants.
Exemple de base :
1 2 3 4 5 6 |
<input type="text" [value]="produit.quantite" // Rien de nouveau : liaison de propriété (JS -> HTML) (input)="produit.quantite = $event.target.value"> // On a besoin d'écouter l'événement d'entrée sur notre boîte de saisie. // On met donc à jour la propriété produit.quantite par la valeur saisie dans la cible de l'événement ($event.target.value) // (HTML -> JS) |
Ceci fonctionne mais fastidieux => Utilisation de [(ngModel)]
:
1 |
<input type="text" [(ngModel)]="produit.quantite"> |
Au préalable, il faut importer le module qui traite des formulaire : FormsModule
:
1 2 3 4 5 6 7 |
... import { FormsModule } from '@angular/forms'; @NgModule({ imports: [..., FormsModule], ... }) ... |
Remarque syntaxique : La combinaison des crochets et parenthèses [(mot)] pour rappeler qu’on utilise la liaison de propriété [mot] mais aussi la liaison d’événement (mot).
Mettre à jour une propriété d’un composant depuis un autre :
Soit donnee une propriété de la classe du composant AutreComponent :
1 2 3 |
export class AutreComponent { @input() donnee : number = 1; } |
L’ajout de @input()
devant la propriété donnee
la rend éligible à la modification depuis l’extérieur. Si on utilise alors dans le template du composant utilisateur le tag de notre composant ainsi :
1 |
<app-autre [donnee]="20"></app-autre> |
donnee
aura la valeur 20 dans l’affichage du template AutreComponent (au lieu de 1).
Attention : ne pas oublier d’importer le composant Input
depuis le noyau Angular.
Je trouve que Angular2 est une technologie très interessante
– Utilisation de concept des composants
– Il supporte plusieurs languages comme TypeScript
– Utilisation de l’orienté objet dans un script
– La performance
– La grande communauté
– Il est facilement testable et maintenable
– Aussi l’utilisation de l’injection des dépendences
Vous pouvez visiter mon site pour angular2
http://www.angular-tuto.com
Merci pour votre commentaire et la suggestion du site…