Angular

Appearance

Qu'est qu'un composant sur Angular ? ​

Dans Angular, un composant est l'une des briques de base les plus fondamentales. Il s'agit d'une classe décorée avec @Component, qui encapsule les données et la logique nécessaires pour afficher une partie de l'interface utilisateur (UI). Chaque composant est responsable d'une section spécifique de l'écran et peut interagir avec d'autres composants et services pour fonctionner dans l'ensemble de l'application.

Bien Comprendre

Un composant n'est ni plus ni moins un élément HTML personnalisé qui peut être réutilisé dans toute l'application.

Un composant se compose de trois parties principales :

  1. La classe du composant : C'est ici que vous gérez la logique de votre composant, comme les interactions utilisateur, la manipulation des données, etc.
  2. Le décorateur @Component : Ce décorateur fournit des métadonnées supplémentaires qui déterminent comment utiliser la classe. Il inclut le chemin vers le fichier HTML qui forme la vue du composant, le chemin vers le fichier CSS pour le style, et peut inclure d'autres configurations spécifiques.
  3. La vue : C'est le template HTML qui définit l'interface utilisateur du composant. Angular utilise le data-binding pour connecter les données de votre classe de composant à la vue, rendant facile la mise à jour dynamique de l'interface utilisateur.

Voici un exemple simple de composant dans Angular :

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

@Component({
  selector: 'app-simple',
  template: `<h1>Bienvenue sur notre application!</h1>`,
  styles: `h1 { color: red; }`,
  standalone: true
})
export class SimpleComponent {
  // La logique du composant peut être ajoutée ici
}

Dans cet exemple :

  • @Component est un décorateur qui définit le composant. Le selector est une balise personnalisée (<app-simple></app-simple>) utilisée pour insérer le composant dans un template HTML. Le template est le HTML qui sera injecté lorsque le composant est rendu. Enfin, styles contient le CSS appliqué spécifiquement à ce template.
  • SimpleComponent est la classe TypeScript où la logique du composant serait gérée. Bien que cet exemple soit simple et ne contienne pas de logique interne, dans des cas réels, cette classe pourrait interagir avec des services, gérer des états, et plus encore.
  • standalone est une option de configuration qui permet de définir si le composant doit être rendu de manière autonome. Avant Angular 14, les composants devaient être inclus dans un module pour être rendus. Depuis Angular 14, les composants autonomes peuvent être rendus sans module 😃

Componsant standalone

Il est conseillé de définir standalone: true pour tous les composants. Cela facilite la réutilisation des composants et simplifie la structure de l'application.

Interpolation: Lire des propriétés dans le template ​

L'interpolation est une fonctionnalité d'Angular qui permet d'afficher des données dynamiques dans le template d'un composant. Pour lire une propriété d'un composant dans le template, vous pouvez utiliser la syntaxe

{{ nom de la propriété }}

Reprenons l'exemple précédent et ajoutons une propriété title à notre composant :

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

@Component({
  selector: 'app-simple',
  template: '<h1>{{ title }}</h1>',
  standalone: true
})
export class SimpleComponent {
  title = 'My App';
}

On appelle cette syntaxe interpolation, ou plus familièrement les moustaches Notez qu'on peut avoir des expressions comme

{{ 1+1 }}

qui affichera 2