3. Les components / composants

09/25/2025 - By 

Retourner à : Angular en 2025

0

Dans ce chapitre, on va expliquer ce qu’est un composant. Pour cela, on va regarder en détail le code du composant de base qui est créé lors de la génération d’un nouveau projet Angular. Puis, on va créer et utiliser un premier composant Angular qui va ressembler à ça:

Pour cela on va traiter les sujets suivants:

  • On va voir ce qu’est un component (composant en français).
  • Ensuit on va créer notre propre composant qu’on affichera à l’écran.

Pour rappel, tout au long de ce cours, on va créer une application de gestion de collections de timbres, pièces, figurines, cartes à jouer ou autre. Dans le dernier chapitre, on a vu comment créer un projet Angular. Donc on va partir du principe que vous avez un projet prêt à être utilisé.

Un component / composant, c’est quoi ?

Pour commencer, on va ouvrir le projet de gestion de collections dans notre éditeur de code et de naviguer dans le dossier « src/app ».

Commençons par définir ce qu’est un « component » (composant en français). Eh bien, vous pouvez considérer un composant comme étant une brique de votre application qui va s’occuper d’un aspect bien spécifique de votre app, et qui se charge de définir le contenu, le style et le comportement de cette brique.

Ici, on voit qu’un composant est composé de ces 4 fichiers: un fichier « scss » qui va contenir les styles spécifiques à ce composant, un fichier « html » qui contient le rendu du composant, un fichier « spec.ts » où on retrouvera des tests, et pour finir, un fichier « ts » qui va définir le comportement de notre composant.

Donc, si on regarde notre projet de gestion de collections, on pourrait avoir un composant « objet-de-collection », un composant « barre-de-recherche », un composant « collection » qui serait composé d’une « barre-de-recherche » et d’une série d' »objets-de-collection », et ainsi de suite:

Quand on regarde le code source de notre application, et les explications que je viens de donner, on pourrait se dire qu’un composant possède toujours 4 fichiers, mais ce n’est pas le cas. Pour être précis, le seul fichier qui est nécessaire est le fichier « ts ». Un tel composant minimal ressemble à ça:

app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '',
})
export class App {
}

Un composant Angular est une simple classe Typscript à laquelle on rajoute le décorateur @Component, qui prend différents paramètres en entrée. Le premier paramètre, selector, est le nom de la balise qu’on pourra utiliser dans notre HTML pour y afficher notre composant. Donc ici, la balise à utiliser est la balise <app-root></app-root> , et si on regarde le fichier « index.html », on voit que celui-ci contient effectivement pour seul élément dans le « body », le tag « app-root ».

Ensuite le @Component prend encore le paramètre template, qui va contenir le HTML que notre composant doit afficher à l’écran. Donc, par exemple, on pourrait ajouter la valeur <h1>Hello World</h1> au paramètre template:

app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<h1>Hello World</h1>',
})
export class App {
}

Si on regarde le résultat dans notre navigateur, on voit que « Hello World » est bien affiché à l’écran.

Là, notre composant n’est pas très beau, mais on peut changer cela en ajouter du css à votre composant avec le paramètre « styles »:

app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<h1>Hello World</h1>',
    styles: `h1 {
        background-color: black;
        color: white;
    }`
})
export class App {
}

Ce n’est toujours pas beau, mais comme vous le voyez nos styles css, ont bien été appliqués:

Et là, vous vous dites sûrement que ça peut vite devenir difficile à lire si on a le HTML, le CSS et le TypeScript dans le même fichier, et vous avez raison. Donc on peut spécifier, tel qu’on l’avait au début, des fichiers qui vont contenir le HTML et le css:

Par convention, les fichiers HTML et (S)CSS ont le même nom que le fichier TypeScript avec leurs extensions respectives, donc ici « app.html » et « app.scss ».

Maintenant on peut déplacer le HTML qu’on avait écrit dans le fichier « app.ts » à l’intérieur du fichier « app.html », et le CSS dans le fichier app.scss. On n’a plus qu’à remplacer le paramètre template par le paramètre templateUrl, qui va être égal à « ./app.html », et le paramètre styles va être remplacé par styleUrl qui va pointer vers le fichier « ./app.scss ».

app.html
<h1>Hello World</h1>
app.scss
h1 {
    background-color: black;
    color: white;
}
app.ts
import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	templateUrl: './app.html',
	styleUrl: './app.scss'
})
export class App {
}

Là, si on sauvegarde le tout et qu’on retourne voir notre navigateur, on voit que le résultat est toujours le même.

Création d’un composant

Maintenant, on va créer notre premier composant. Pour cela, on va dans le terminal et là, on a deux choix: Soit vous tapez:

Bash
ng generate component <nom_du_composant>

ou soit vous tapez:

Bash
ng g c <nom_du_composant>

Dans notre cas, on va appeler le composant « collection-item-card » et on va vouloir stocker ce composant dans un dossier « components » à l’intérieur du dossier app. Pour cela, on va taper:

Bash
ng g c components/collection-item-card

Si vous ne souhaitez pas générer le fichier de test, vous pouvez également le spécifier avec un  » —skip-tests » après le nom de votre composant:

Bash
ng g c components/collection-item-card --skip-tests

Dans notre cas, on va également générer les tests, car on en reparlera dans un prochain chapitre.

Structure de dossiers dans ce cours

Avant de continuer, je tiens à préciser que la structure de dossiers utilisée tout au long de ce cours n’est pas adapté à de grands projets. Elle a uniquement vocation à vous aider à comprendre les différents concepts et leurs différences. Donc vous verrez tout au long du cours qu’on va créer des dossier pour chaque type de concept qu’on va apprendre et utiliser.

Dans de grands projets il est plus efficace de regrouper son code par fonctionnalité fournie. Donc quand vous maîtriserez Angular, je vous conseil d’apprendre à structurer votre code en recherchant sur internet les mots clés « Angular feature base project structure » ou encore en demandant à votre IA préféré de vous expliquer cette manière d’organiser le code.

Affichage du composant

Une fois le composant généré, regardons comment l’afficher sur notre page. Pour cela, on va se rendre dans le dossier « components » et on va jeter un coup d’oeil au contenu du sous-dossier « collection-item-card »:

Si on ouvre le fichier « collection-item-card.ts », on voit que notre composant est une classe qui s’appelle « CollectionItemCard » et que son sélecteur s’appelle « app-collection-item-card ».

Pour pouvoir utiliser ce composant dans notre composant principal, nous devons d’abord l’importer dans le fichier « app.ts »:

app.ts
import { Component } from '@angular/core';
import { CollectionItemCard } from './components/collection-item-card/collection-item-card';

@Component({
	selector: 'app-root',
    imports: [CollectionItemCard],
	templateUrl: './app.html',
	styleUrl: './app.scss'
})
export class App {
}

Et là, on peut ouvrir le fichier « app.html » et remplacer le code qui s’y trouve par le tag <collection-item-card></collection-item-card>:

app.html
<app-collection-item-card></app-collection-item-card>

On sauvegarde, et si on regarde le résultat dans le navigateur, on voit le contenu par défaut du nouveau composant qui est simplement le nom de celui-ci, donc: « collection-item-card » suivi du mot « works! ».

Maintenant, on peut s’attaquer au contenu de notre composant. Tout d’abord on va devoir ajouter quelques images à notre projet. Pour les abonnées Standard et Premium, vous pouvez copier le dossier « img », que vous retrouverez dans le dossier public du code source, dans votre propre dossier public. 

Pour les autres, vous pouvez utiliser d’autres image, mais pour pouvoir suivre ce cours le plus simplement possible, je vous recommande de créer un répertoire « img » dans votre répertoire « public » et d’y stocker vos images avec les noms suivants: 

Une fois que c’est fait, on va pouvoir créer le contenu de notre fichier « collection-item-card.html »:

collection-item-card.html
<article class="collection-item-card">
    <span class="rarity-chip">Legendary</span>

    <figure class="item-image">
        <img src="img/linx.png" alt="Excalibur Sword" />
    </figure>

    <header class="item-header">
        <h2 class="item-name">Excalibur</h2>
    </header>

    <p class="item-description">
        A legendary sword of unmatched sharpness and history.
    </p>
    
    <footer>
        <p class="item-price">$199</p>
    </footer>
</article>

Maintenant, ajoutons un peu de css au fichier « collection-item-card.scss » pour rendre le tout un peu plus beau:

collection-item-card.scss
.collection-item-card {
  display: flex;
  position: relative;
  flex-direction: column;
  background: #f0f6ff;
  border: 1px solid #8ca3c7;
  border-radius: 12px;
  padding: 1rem;
  width: 16rem;
  height: 21rem;

  cursor: pointer;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.collection-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.rarity-chip {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #4a6cf7;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.item-image {
  text-align: center;
  flex-shrink: 0;
}

.item-image img {
  max-width: 100%;
  max-height: 10rem;
  border-radius: 8px;
}

.item-header {
  margin-top: 0.75rem;
  flex-shrink: 0;
}

.item-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: #1e2a3a;
}

.item-description {
  margin: 0.75rem 0;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.4;
  flex-grow: 1;
}

.item-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e8a3a;
  margin: 0;
}

Et pour finir, on va rajouter quelques styles dans le fichier « styles.css » global de l’application:

styles.scss
body {
    height: 100vH;
    background: linear-gradient(
        135deg,
        rgba(245, 230, 255, 1) 0%,   /* light blue */
        rgba(230, 240, 255, 1) 50%,  /* light purple */
        rgba(245, 230, 255, 1) 100%  /* light yellow */
    );
}

On sauvegarde le tout et on regarde le résultat:

Et voilà, nous avons le début de notre application de gestion de collections qui est affiché à l’écran. On a encore beaucoup de choses à voir avec cette carte, comme, par exemple, le fait de pouvoir lui passer les informations de l’a carte l’objet à afficher en paramètre, mais ça, ce sera le sujet d’un autre chapitre!

Ressources

Vous retrouvez ci-dessous un lien vers le code source utilisé dans ce chapitre. Ce lien est uniquement disponible pour les abonnés Standard et Premium.

Quiz

Répondez au quiz ci-dessous afin de vérifier que vous avez bien compris le contenu de cette leçon. Les quiz sont uniquement disponibles pour les abonnés Standard et Premium.

Laisser un commentaire