Debuter avec Angular 14: #6 Les Composants

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

Prenons cet 예



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(아벡 몬 터미널)

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.

라 마노

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

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

언슬피셔 ? oui oui, avec Angular tu as le choix de faire comme bon te semble. Tu peux avoir ton 템플릿, 스타일 en fichier séparés ou pas, les goouts 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
  ],

이용

Maintenant tu peux faire ceci dans n'importe quel composant, je prends app.component 예를 들어.

Dans le 템플릿

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