Angular - 1.5.2 Modifier ma première application Angular avec ngModel

Cette leçon reprend la première application Angular et la modifie. Nous voyons comment Angular génère le contenu de la page, puis comment la liaison de données met à jour l'affichage. La directive ngModel relie un champ de saisie à une propriété du composant. Cette notion reviendra tout au long du cours.

Ce que le navigateur reçoit d'Angular

En inspectant la source de la page, on ne voit pas le contenu de l'application. On voit surtout des imports de scripts en bas de page, ainsi que la balise app-root.

La page provient du fichier index.html du dossier src. Angular ajoute dynamiquement les imports de scripts, puis remplace app-root par le composant principal, app.component.

Une application Angular peut contenir plusieurs composants. Le cours les étudiera en détail.

Changer le titre avec une propriété

Dans le fichier app.component.ts, on remplace le titre par une propriété nommée name, avec la valeur Toto.

Dans le template, on supprime le contenu existant. On ajoute ensuite un champ de texte, suivi d'un paragraphe qui affichera le nom.

name = 'Toto';

Lier le champ de saisie avec ngModel

La directive ngModel écoute tout ce que l'utilisateur saisit et le stocke dans la propriété name. Elle affiche aussi la valeur de name dans le champ. La syntaxe entoure ngModel de crochets et de parenthèses, sans tiret entre les mots.

Si l'on enregistre sans autre réglage, la console du navigateur affiche une erreur : Angular ne connaît pas ngModel. Les outils de développement de Chrome, accessibles par le menu Affichage, permettent de lire cette erreur.

<input type="text" [(ngModel)]="name">

Importer FormsModule pour que ngModel fonctionne

Le module FormsModule appartient au paquet @angular/forms. Il faut l'importer en haut du fichier app.module.ts, car TypeScript a besoin de savoir où se trouvent les éléments.

Cet import ne suffit pas : il faut aussi ajouter FormsModule au tableau imports du module de l'application. Après enregistrement, l'application se reconstruit. Le champ affiche alors Toto, et le paragraphe se met à jour en temps réel pendant la saisie.

import { FormsModule } from '@angular/forms';

• Ajoutez FormsModule au tableau imports du module de l'application.
• Vérifiez que la console du navigateur n'affiche plus d'erreur sur ngModel.

En résumé

La liaison de données relie une valeur du composant à ce qui s'affiche sur la page. La directive ngModel synchronise un champ de saisie avec une propriété. Elle ne fonctionne qu'après l'import de FormsModule dans le module de l'application. La syntaxe complète de ces liaisons sera détaillée plus loin dans le cours.

Points clés

• La liaison de données relie une valeur du composant à ce qui s'affiche.
• La directive ngModel stocke la saisie dans une propriété du composant.
• La syntaxe s'écrit avec des crochets et des parenthèses autour de ngModel, sans tiret.
• FormsModule doit être importé depuis @angular/forms, puis ajouté au tableau imports.
• Les outils de développement de Chrome affichent les erreurs présentes dans la console.

Questions fréquentes

Pourquoi le code de mon application n'apparaît-il pas dans la source de la page ?

Angular génère le contenu dans le navigateur. La source initiale ne contient que les imports de scripts et la balise app-root.

Que signifie l'erreur sur ngModel dans la console ?

Angular ne connaît pas ngModel tant que FormsModule n'est pas importé. Ajoutez cet import dans app.module.ts, puis dans le tableau imports.

Pourquoi la vidéo utilise-t-elle Chrome ?

L'auteur recommande Chrome pour ce cours, car il le juge doté des meilleurs outils de développement.