Anatomie d'un composant

Chaque composant doit avoir :

• Une classe TypeScript avec des comportements, comme la gestion des saisies de l'utilisateur et la récupération de données depuis un serveur
• Un template HTML qui contrôle ce qui est rendu dans le DOM
• Un selector CSS qui définit comment le composant est utilisé dans le HTML

Vous fournissez à Angular les informations propres à un composant en ajoutant un décorateur @Component au-dessus de la classe TypeScript :

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
})
export class ProfilePhoto {}

Pour tous les détails sur l'écriture des templates Angular, notamment le data binding, la gestion des événements et le control flow, consultez le guide des templates.

L'objet passé au décorateur @Component s'appelle les métadonnées du composant. Elles comprennent le selector, le template et d'autres propriétés décrites tout au long de ce guide.

Les composants peuvent, de façon facultative, inclure une liste de styles CSS qui s'appliquent au DOM de ce composant :

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
  styles: `
    img {
      border-radius: 50%;
    }
  `,
})
export class ProfilePhoto {}

Par défaut, les styles d'un composant n'affectent que les éléments définis dans le template de ce composant. Consultez Styliser les composants pour les détails sur l'approche d'Angular en matière de styles.

Vous pouvez aussi choisir d'écrire votre template et vos styles dans des fichiers distincts :

@Component({
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto {}

Cela peut aider à séparer les préoccupations de présentation de celles de comportement dans votre projet. Vous pouvez choisir une approche pour l'ensemble de votre projet, ou décider laquelle utiliser pour chaque composant.

templateUrl et styleUrl sont tous deux relatifs au répertoire dans lequel se trouve le composant.

Utiliser des composants

Les imports dans le décorateur @Component

Pour utiliser un composant, une directive ou un pipe, vous devez l'ajouter au tableau imports du décorateur @Component :

import {Component} from '@angular/core';
import {ProfilePhoto} from './profile-photo';

@Component({
  // Import the `ProfilePhoto` component in
  // order to use it in this component's template.
  imports: [ProfilePhoto],
  /* ... */
})
export class UserProfile {}

Par défaut, les composants Angular sont standalone, ce qui signifie que vous pouvez les ajouter directement au tableau imports d'autres composants. Les composants créés avec une version antérieure d'Angular peuvent à la place spécifier standalone: false dans leur décorateur @Component. Pour ces composants, vous importez plutôt le NgModule dans lequel le composant est défini. Consultez le guide complet sur NgModule pour plus de détails.

Afficher des composants dans un template

Chaque composant définit un selector CSS :

@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

Consultez Selectors de composant pour les détails sur les types de selectors pris en charge par Angular et des conseils pour choisir un selector.

Vous affichez un composant en créant un élément HTML correspondant dans le template d'autres composants :

@Component({
  selector: 'profile-photo',
})
export class ProfilePhoto {}

@Component({
  imports: [ProfilePhoto],
  template: `<profile-photo />`,
})
export class UserProfile {}

Angular crée une instance du composant pour chaque élément HTML correspondant qu'il rencontre. L'élément du DOM qui correspond au selector d'un composant est appelé le host element de ce composant. Le contenu du template d'un composant est rendu à l'intérieur de son host element.

Le DOM rendu par un composant, qui correspond au template de ce composant, est appelé la vue de ce composant.

En composant ainsi les composants, vous pouvez vous représenter votre application Angular comme un arbre de composants.

Cette structure en arbre est importante pour comprendre plusieurs autres concepts d'Angular, notamment l'injection de dépendances et les child queries.