Composants

Les composants sont les principales briques des applications Angular. Chaque composant représente une partie d'une page web plus grande. Organiser une application en composants aide à structurer votre projet, en séparant clairement le code en parties spécifiques, faciles à maintenir et à faire évoluer.

Définir un composant

Chaque composant comporte quelques parties principales :

1. Un décorateur @Component qui contient la configuration utilisée par Angular.
2. Un template HTML qui contrôle ce qui est rendu dans le DOM.
3. Un selector CSS qui définit comment le composant est utilisé dans le HTML.
4. Une classe TypeScript avec des comportements, comme la gestion des saisies de l'utilisateur ou l'envoi de requêtes à un serveur.

Voici un exemple simplifié d'un composant UserProfile.

@Component({
  selector: 'user-profile',
  template: `
    <h1>User profile</h1>
    <p>This is the user profile page</p>
  `,
})
export class UserProfile {
  /* Your component code goes here */
}

Le décorateur @Component accepte aussi, de façon facultative, une propriété styles pour le CSS que vous souhaitez appliquer à votre template :

@Component({
  selector: 'user-profile',
  template: `
    <h1>User profile</h1>
    <p>This is the user profile page</p>
  `,
  styles: `
    h1 {
      font-size: 3em;
    }
  `,
})
export class UserProfile {
  /* Your component code goes here */
}

Séparer le HTML et le CSS dans des fichiers distincts

Vous pouvez définir le HTML et le CSS d'un composant dans des fichiers distincts avec templateUrl et styleUrl :

@Component({
  selector: 'user-profile',
  templateUrl: 'user-profile.html',
  styleUrl: 'user-profile.css',
})
export class UserProfile {
  // Component behavior is defined in here
}

<h1>User profile</h1>
<p>This is the user profile page</p>

h1 {
  font-size: 3em;
}

Utiliser des composants

Vous construisez une application en composant plusieurs composants entre eux. Par exemple, si vous créez une page de profil utilisateur, vous pourriez découper la page en plusieurs composants comme ceci :

Ici, le composant UserProfile utilise plusieurs autres composants pour produire la page finale.

Pour importer et utiliser un composant, vous devez :

1. Dans le fichier TypeScript de votre composant, ajouter une instruction import pour le composant que vous voulez utiliser.
2. Dans votre décorateur @Component, ajouter une entrée au tableau imports pour le composant que vous voulez utiliser.
3. Dans le template de votre composant, ajouter un élément qui correspond au selector du composant que vous voulez utiliser.

Voici un exemple d'un composant UserProfile qui importe un composant ProfilePhoto :

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

@Component({
  selector: 'user-profile',
  imports: [ProfilePhoto],
  template: `
    <h1>User profile</h1>
    <profile-photo />
    <p>This is the user profile page</p>
  `,
})
export class UserProfile {
  // Component behavior is defined in here
}

Étape suivante

Maintenant que vous savez comment fonctionnent les composants dans Angular, il est temps d'apprendre à ajouter et gérer des données dynamiques dans votre application.