📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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

typescript
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 BindingSyntaxeDescriptionPlus 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, @switchPermet de contrôler l'affichage des éléments du template en fonction de conditions ou boucles.Control flow

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !