02 - Le binding

Introduction

Le système de template (d'affichage) d’Angular nous propose une syntaxe puissante pour exprimer les parties dynamiques de notre HTML. Elle nous permet de faire du binding de propriétés et d’événements d’une façon claire, avec des symboles précis. Décortiquons tout cela.

Avant de démarrer, assure-toi d'avoir terminé les quêtes suivantes👇

Objectifs

✅ Comprendre l’interpolation : TS → HTML ✅ Comprendre le property binding : TS → HTML ✅ Comprendre l’event-binding : HTML→ TS ✅ Comprendre le two-way binding : HTML → TS et TS → HTML

L'interpolation : TS → HTML

L'interpolation permet d'afficher le contenu d'une variable déclarée depuis le TS dans la page HTML. Pour cela, tu peux utiliser le signe {{ }}, aussi appelé "doubles moustaches".

Partons du principe qu'à la suite d'un ng generate component mon-composant, les fichiers suivants sont générés :

.
├── src
│   └── app
│       └── mon-composant
│           ├── mon-composant.component.ts
│           ├── mon-composant.component.css
│           ├── mon-composant.component.spec.ts
│           └── mon-composant.component.html

Si dans ton ficher mon-composant.component.ts, tu crées une variable name dont la valeur est Bob :

import { Component } from '@angular/core';

@Component({
  selector: 'app-mon-composant',
  standalone: true,
  imports: [],
  templateUrl: './mon-composant.component.html',
  styleUrl: './mon-composant.component.css'
})

export class MonComposantComponent {

  name: string = "Bob";

}

Tu vas pouvoir afficher la valeur de cette variable dans mon-composant.component.html de la façon suivante :

<p>
  Hello {{name}} !
</p>

Ce qui va générer :

<p>
  Hello Bob !
</p>

C'est plutôt sacrément pratique ! Mais ce qui est encore mieux, c'est que si la valeur de la variable name venait à être modifiée un peu plus tard (par exemple si Bob devenait Bobby), Angular s'occuperait alors de mettre à jour automatiquement son affichage dans la partie template (HTML) via l'interpolation {{ }}.

Le binding de propriété : TS → HTML

Exemple : l'attribut "type" pour un input :

<input type="text">

Lorsque le navigateur charge ton code HTML, il vient parallèlement créer une représentation de ce code HTML en objet Javascript : c'est ce que l'on appelle le DOM (Document Objet Model).

Cet objet Javascript, le DOM, est un objet vaste et tentaculaire 🐙 Et c'est absolument passionnant ! Mais ce n'est pas l'objet de la quête actuelle. Tu auras le temps de découvrir ses subtilités au fur et à mesure de ta carrière de développeur 🤓

✅ Ce que tu dois ici garder en tête, c'est que grâce au DOM, tu peux agir sur le code HTML depuis JS. Et dans le cas qui nous intéresse ici, tu peux agir sur un attribut HTML depuis son équivalence en propriété DOM.

Mais revenons à nos moutons ! 🐑

Avec Angular, le binding permet d'injecter une variable déclarée dans ton fichier TS dans une propriété DOM d'un élément HTML. C'est pour cela que l'on parle de property binding.

Pour utiliser le property binding, tu peux utiliser le signe [ ].

Par exemple, si tu as dans le ficher mon-composant.component.ts une variable imageSrc :

import { Component } from '@angular/core';

@Component({
  selector: 'app-mon-composant',
  standalone: true,
  imports: [],
  templateUrl: './mon-composant.component.html',
  styleUrl: './mon-composant.component.css'
})

export class MonComposantComponent {

  name: string = "Bob";
  imageSrc: string = "images/002-bob.png";

}

Tu peux faire dans le fichier mon-composant.component.html :

<p>
  <img [src]="imageSrc" [alt]="name" />
  Hello {{name}} !
</p>

Ce qui va générer :

<p>
 <img src="images/002-bob.png" alt="Bob" />
  Hello Bob !
</p>

Le binding d'événements : HTML → TS

Ce binding permet de passer de l'information du HTML vers le TS. Pour cela, tu peux utiliser le signe ( ).

Tu vas ainsi pouvoir écouter les événements de ton utilisateur, comme par exemple le clic de la souris ou encore la frappe sur le clavier.

Par exemple, si tu as dans un ficher mon-composant.component.html :

<p>
  <img [src]="imageSrc" [alt]="name" />
  Hello {{name}} !
</p>
<button (click)="sayHello()">Dire Bonjour</button>

Tu peux faire dans le fichier mon-composant.component.ts :

import { Component } from '@angular/core';

@Component({
  selector: 'app-mon-composant',
  standalone: true,
  imports: [],
  templateUrl: './mon-composant.component.html',
  styleUrl: './mon-composant.component.css'
})

export class MonComposantComponent {

  name: string = "Bob";
  imageSrc: string = "images/002-bob.png";

  sayHello(): void  {
    alert("Bonjour !");
  }

}

Cela déclenchera, au clic sur le bouton dont le texte est "Dire Bonjour", une popup dans le navigateur de l'utilisateur. Cette popup contiendra le message "Bonjour !".

C'est un exemple peu applicable dans le cas d'une vraie application, mais l'event binding ( ) est omniprésent dans une application Angular : afficher ou désafficher un message, cacher une liste, déclencher un appel à une base de données, changer de page, filtrer un élément, modifier une variable, etc...

Le two-way binding : HTML → TS et TS → HTML

Ce binding permet de passer de l'information du HTML vers le TS et inversement. Pour cela, tu peux utiliser le signe [( )] (une sorte de combinaison des 2 bindings précédents).

Angular nomme ce signe banana box ou boîte à bananes : les ( ) représentent les bananes et les [ ] représentent la boîte.

Pourquoi pas. 🤓

Avec le two-way binding [( )], tu vas pouvoir écouter les événements de ton utilisateur et mettre à jour directement l'information dans le composant et le template HTML. Tu l'utiliseras principalement pour la création de formulaires.

→ Si on applique le two-way binding aux formulaires, il faut ajouter ngModel à l'intérieur des parenthèses. Ce qui donne alors : [(ngModel)]

Par exemple, si tu as dans le ficher mon-composant.component.html :

<p>
  <img [src]="imageSrc" [alt]="name" />
  Hello {{name}} !
</p>

<button (click)="sayHello()">Dire Bonjour</button>

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

Tu viens alors expliquer à Angular que les éléments textuels saisis dans l'input seront directement inscrits dans la variable name.

Dans ton composant mon-composant.component.ts, tu dois ajouter les lignes suivantes :

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

@Component({
  selector: 'app-mon-composant',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './mon-composant.component.html',
  styleUrl: './mon-composant.component.css'
})

export class MonComposantComponent {

  name: string = "Bob";
  imageSrc: string = "images/002-bob.png";

  sayHello(): void  {
    alert("Bonjour !");
  }

}

Désormais, à la saisie dans le champ input, ton nom d'utilisateur sera changé dynamiquement 🔥🔥🔥

Challenge 💪

Fiche de contact 📄

Pour réaliser ce challenge, repars de l'app Angular que tu as créé dans la précédente quête :

Tu vas devoir créer un nouveau composant user-profile, puis l'afficher dans le navigateur.

Ce composant contiendra un objet user :

user = {
  name : 'Doe',
  firstName : 'John',
  age : 25,
  quote : '',
  photo : 'https://randomuser.me/api/portraits/lego/2.jpg'
};

Tu devras afficher sous la forme d'une fiche de contact, l'ensemble de ces informations en utilisant l'interpolation et le binding :

• La photo de l'utilisateur
• Un champ input pour éditer la citation (quote)
• L'âge
• Le nom et le prénom
• Un bouton pour masquer l'âge. Pense à la propriété hidden redéfinie par Angular. N'hésite pas à fouiller sur internet 🤓 (en anglais naturellement, tu y trouveras toujours beaucoup plus de réponses précises et pertinentes).

Critères de validation ✅

• Le composant user-profile est appelé dans app.component.html
• À la saisie dans le champ input la citation change
• Au clic sur le bouton, l'âge disparaît
• Poste ta solution avec le lien Github où ton projet Angular est hébergé