Comprendre les syntaxes dans les templates Angular

Qu'est-ce qu'un template Angular ?

Un template Angular est un morceau de HTML qui détermine ce que votre composant va afficher. Imaginez que vous construisiez une maison : le template serait comme le plan de la maison, indiquant où chaque pièce et chaque meuble doivent aller. De la même manière, un template Angular définit où les éléments de votre interface utilisateur doivent apparaître.

Bindings dans les templates

Les bindings permettent de lier les données de votre composant à votre template. Il existe plusieurs types de bindings dans Angular :

• Interpolation : affiche des données dynamiques dans le template.
• Property binding : lie une propriété d'un élément HTML à une propriété du composant.
• Event binding : écoute des événements DOM et appelle des méthodes du composant.
• Two-way binding : lie une propriété d'un élément HTML aux données du composant de manière bidirectionnelle.
• Control flow : permet de contrôler l'affichage des éléments du template en fonction de conditions ou boucles.

Exemple de bindings

Fichier : src/app/pages/product.component.ts

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

@Component({
  selector: 'app-product',
  standalone: true,
  imports: [FormsModule], // pour utiliser ngModel
  template: `
    <div class="product">
      <h2>{{ productName }}</h2> <!-- Interpolation -->
      <img [src]="productImage" alt="{{ productName }}"> <!-- Property binding -->
      <button (click)="addToCart()">Ajouter au panier</button> <!-- Event binding -->
      <input [(ngModel)]="quantity" type="number"> <!-- Two-way binding -->
    </div>
  `,
  styles: `
    .product {
      border: 1px solid #ccc;
      padding: 16px;
      text-align: center;
    }
  `
})
export class ProductComponent {
  productName = 'Produit 1';
  productImage = 'assets/product1.jpg';
  quantity = 1;

  addToCart() {
    console.log(`${this.quantity} ${this.productName}(s) ajouté(s) au panier.`);
  }
}

Ici, on a donc:

Type de Binding	Syntaxe	Description	Plus de détails
Interpolation	{ { productName } }	Insère la valeur de productName dans le template.
Property binding	[src]="productImage"	Lie l'attribut src de l'image à la propriété productImage du composant.
Event binding	(click)="addToCart()"	Appelle la méthode addToCart lorsque le bouton est cliqué.
Two-way binding	[(ngModel)]="quantity"	Lie la valeur de l'input quantity au champ quantity du composant de manière bidirectionnelle.	Two-way binding
Control flow	@if, @for, @switch	Permet de contrôler l'affichage des éléments du template en fonction de conditions ou boucles.	Control flow