Qu'est-ce qu'un composant Angular ?

Question

Accepted Answer

Un **composant** est le bloc de construction fondamental d'une interface utilisateur Angular — une **classe** TypeScript décorée avec `@Component` qui contrôle une section de l'écran (sa "vue"). Chaque application Angular est un arbre de composants. ## Anatomie d'un composant ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` Le décorateur `@Component` relie trois éléments : un **selector** (comment vous l'utilisez en HTML), un **template** (le balisage), et des **styles** (limités à ce composant). ## La classe contient la logique et les données ```html

``` Les propriétés et méthodes publiques de la classe sont directement accessibles dans son template via la liaison — c'est le cœur de la façon dont Angular connecte les données et la vue. ## Utiliser un composant ```html ``` ## Les styles sont encapsulés par défaut ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular limite automatiquement les styles des composants (View Encapsulation), afin que le CSS ne s'échappe pas entre les composants. ## Pourquoi c'est important Les composants sont la façon dont vous structurez chaque application Angular — des unités autonomes de template + logique + styles limités, composées dans un arbre. Comprendre le décorateur `@Component` (selector, template, styles) et comment les propriétés/méthodes de la classe se lient au template est la base absolue du développement Angular ; tout le reste est fondé sur le modèle de composant.