6-1 Structure d'un composant

Un composant Angular est composé de deux éléments principaux:

• Un décorateur @Component pour décrire:
  • selector: le sélecteur HTML associé au composant (ex.: app-root)
  • imports: les dépendances requises au fonctionnement du composant
  • template: le gabarit (template) HTML du composant
  • styles: les styles, optionnellement, associés directement au composant
• Une classe contenant les propriétés et la logique du composant

Par exemple, pour le composant racine App:

src/app/app.ts

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <h1>Bienvenue dans l'application {{ title() }}!</h1>

    <router-outlet />
  `,
  styles: [],
})
export class App {
  protected readonly title = signal('Houdini');
}

• @Component est un décorateur permettant d'ajouter les fonctionnalités de composant à la classe
  • selector: 'app-root' est la balise HTML qui doit être utilisée pour inclure le composant dans une page ou un autre composant (<app-root></app-root>).
  • imports: RouterOutlet est une classe de '@angular/router'. Nous y reviendront plus tard. Mais c'est ce qui permet la balise <router-outlet /> dans le HTML.
  • template contiens le HTML à afficher par le composant (vous pouvez ignorer <router-outlet> pour l'instant)
  • styles: pourrait contenir des règles SCSS pour les styles propres à ce composant
• export class App est une classe représentant le composant et contenant la logique de ce dernier. Elle peut contenir:
  • Des propriétés
  • Des fonctions
  • Un constructeur