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 :
- 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.
- 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.
- 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. Leselector
est une balise personnalisée (<app-simple></app-simple>
) utilisée pour insérer le composant dans un template HTML. Letemplate
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èrementles moustaches
Notez qu'on peut avoir des expressions comme
{{ 1+1 }}
qui affichera 2