Débuter avec Angular 14: #6 Les composants

L'une des choses les plus importantes quand il s'agit de framework frontend est cette magie de pouvoir utiliser et réutiliser des elements visuels.

Prenons cet exemple

On voit clairement un element qui se repete, on va l'appeler: "DishCard" (anglais de ouf 🇬🇧🫖)

Nous allons en faire un composant et par la suite, nous pourrons afficher une liste de card.

La syntaxe pour créer un composant

La maniere la plus rapide (avec mon terminal)

npx ng generate component DishCard

Idéalement il faudrait essayer de le faire avec le terminal mais pour apprendre, je prefere que tu le faire à la mano.

À la mano

// dish-card.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-dish-card',
    template: '<h1>Dish Card</h1>',
})
export class DishCardComponent {}

En un seul fichier ? oui oui, avec Angular tu as le choix de faire comme bon te semble. Tu peux avoir ton template, style en fichier séparés ou pas, les gouts et les couleurs...

Il ne faut juste par oublier de le declarer dans ton app.module.ts sinon Angular ne l'enregistrera pas dans la liste des composants

// app.module.ts

  declarations: [
    //...
    AppComponent,
    DishCardComponent
  ],

Utilisation

Maintenant tu peux faire ceci dans n'importe quel composant, je prends app.component comme exemple.

Dans le template

<app-dish-card></app-dish-card>