DEV Community 👩‍💻👨‍💻

Sid Ali BENTIFRAOUINE
Sid Ali BENTIFRAOUINE

Posted on

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

Image description

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
Enter fullscreen mode Exit fullscreen mode

Image description

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 {}
Enter fullscreen mode Exit fullscreen mode

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
  ],
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)

We want your help! Become a Tag Moderator.
Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.