Angular est l’un des frameworks les plus populaires pour construire des applications web modernes. Au cœur de son architecture se trouve un concept fondamental : le composant.

Mais qu’est-ce qu’un composant Angular exactement ? Comment fonctionne-t-il, et pourquoi est-il si central dans le développement Angular ? Dans cet article, nous allons demistifier ce concept, étape par étape.

🗂️ Sommaire

1. Définition d’un Composant Angular

2. Structure d’un Composant

3. Exemple : UserCard

4. Template HTML

5. Styles CSS

6. ✅ Bonnes pratiques Angular

7. 🚀 Conclusion

---

🧩 Définition d’un Composant Angular

Un composant dans Angular est une brique fonctionnelle et visuelle réutilisable. Il contrôle une portion de l'interface utilisateur (UI) et encapsule à la fois la logique, la présentation (HTML), et le style (CSS) nécessaires à son fonctionnement. En gros, un composant est tout fichier contenant le decorateur @component.

En d’autres termes, un composant est :

• Une classe TypeScript qui gère des données et des comportements

• Un template HTML qui représente l’interface utilisateur

• Une feuille de style CSS/SCSS qui définit l’apparence

Pour générer un composant dans Angular, il suffit d’exécuter la commande ng generate component nom-du-composant( ou ng g c nom-du-composant qui est une commande raccourcie) dans le terminal. Simple et rapide.

🔍 Structure d’un Composant

La structure d’un composant Angular varie en fonction de son rôle et de sa complexité. Il peut ainsi être défini dans un seul fichier ou réparti sur deux, trois, voire quatre fichiers distincts. Il n’est donc pas surprenant de rencontrer, dans certains projets, des composants entièrement regroupés dans un seul fichier, notamment lorsqu’ils sont simples ou que cela reflète les préférences de l’équipe de développement.

Prenons par exemple un composant UserCard. Dans une approche classique avec Angular, il est courant de séparer sa logique, sa structure HTML et ses styles CSS dans trois fichiers différents. Cette organisation favorise la lisibilité du code et en facilite la maintenance à long terme.

user-card/

user-card/
├── user-card.component.ts # Behavior (class)
├── user-card.component.html # Template (view)
├── user-card.component.css # Style (appearance)

1. La classe TypeScript (.ts)

Ce fichier contient la logique métier du composant. On y définit la classe du composant, ses propriétés, ses méthodes et les décorateurs Angular comme @Component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.css']
})
export class UserCardComponent {
  user = {
    name: 'Faouzi',
    role: 'Développeur'
  };
}

Analyse du composant UserCardComponent

Ce composant Angular est une carte utilisateur simple qui affiche des informations de base sur un utilisateur.

1. Importation de Component

    import { Component } from '@angular/core';
   

   Ici, on importe le décorateur @Component depuis le module Angular core. Ce décorateur permet à Angular de reconnaître cette classe comme un composant.

2. Décorateur @Component

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.css']
})

Ce décorateur configure le composant. Voici le détail des propriétés :

\=> selector: 'app-user-card'

→ C’est le nom personnalisé de la balise HTML utilisée pour insérer ce composant dans une autre vue. Exemple d'utilisation : <app-user-card></app-user-card> ou tout simplement <app-user-card/>

\=> templateUrl

→ Chemin vers le fichier HTML (user-card.component.html) contenant le template (le code HTML affiché).

\=> styleUrls

→ Chemin vers le fichier css (user-card.component.css) ou scss qui contient les styles spécifiques à ce composant.

3. Classe UserCardComponent

export class UserCardComponent {
  user = {
    name: 'Faouzi',
    role: 'Développeur'
  };
}

Cette classe représente la logique du composant.

• Elle déclare une propriété user contenant un objet avec deux champs :

  • name: 'Faouzi'

  • role: 'Développeur'

• Cette propriété peut ensuite être utilisée dans le template HTML avec une syntaxe de liaison (interpolation).

2. Le template HTML (.html)

<div class="card">
  <h2>{{ user.name }}</h2>
  <p>{{ user.role }}</p>
</div>

Ce template représente la structure visuelle du composant UserCardComponent. Il permet d’afficher dynamiquement les informations d’un utilisateur.

🧱 1. <div class="card">

• Cette div sert de conteneur principal.

• Elle utilise une classe CSS nommée card, définie dans le fichier user-card.component.css.

• Elle sert à styliser un bloc.

🧑‍💻 2. <h2>{{ user.name }}</h2>

• Cette balise h2 affiche le nom de l’utilisateur.

• La syntaxe {{ user.name }} est de l’interpolation Angular.

• Elle permet d'afficher dynamiquement la valeur de user.name définie dans la classe TypeScript.
  → Dans notre cas, cela affichera "Faouzi".

🧾 3. <p>{{ user.role }}</p>

• Cette balise p affiche le rôle de l’utilisateur.

• Là encore, on utilise l’interpolation avec {{ user.role }}.

• Cela affichera "Développeur".

3. Les styles CSS (.css)

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
}

Ce bloc de style s’applique à tous les éléments HTML ayant la classe card. Il est utilisé ici pour styliser l’encadré du composant UserCard.

🧱 .card

C’est le sélecteur de classe CSS. Il cible tous les éléments qui ont class="card" (dans notre cas, la <div> du template).

---

🧩 Détail des propriétés :

1. border: 1px solid #ccc;

   • Crée une bordure fine de 1 pixel, de style plein (solid), et de couleur gris clair (#ccc).

   • Cela permet de délimiter visuellement la carte utilisateur.

2. padding: 1rem;

   • Ajoute de l’espace intérieur (espacement entre le contenu et les bords de la carte).

   • 1rem correspond à la taille de la police de base du navigateur (souvent 16px).

   • Cela améliore la lisibilité et l’aération du contenu.

3. border-radius: 8px;

   • Arrondit légèrement les coins de la carte avec un rayon de 8 pixels.

   • Cela donne un look plus moderne et doux, souvent utilisé dans les interfaces actuelles.

---

✅ Bonnes pratiques à adopter

Voici quelques bonnes pratiques pour tirer le meilleur parti des composants Angular :

• Un composant = un rôle
  Évite les composants fourre-tout. Garder un objectif clair et unique.

• Structure cohérente
  Utiliser .component.ts, .component.html, .component.scss pour les versions d’angular <20 et rester aligné avec les standards Angular. À partir d’Angular 20, ces suffixes ne sont plus nécessaires.

• Utilise le style SCSS ou CSS encapsulé
  Préfèrer SCSS pour des projets plus complexes : il offre la puissance des variables, mixins, nesting…

• Optimiser avec ChangeDetectionStrategy.OnPush
  Si ton composant reçoit uniquement des données en entrée (immutables), OnPush améliore les performances.

• Responsabilité unique
  Ne surcharge pas les composants avec trop de logique métier : penser à délèguer aux services. Ils sont là pour ça.

• Réutilisabilité
  Anticiper la réutilisation de votre composant dans d’autres contextes. Utiliser des @Input() et @Output() bien nommés.

🚀 Conclusion

Les composants sont au cœur d’Angular : comprendre leur structure et leur fonctionnement est indispensable pour développer des applications solides, maintenables et performantes.

Dans les prochains articles, nous verrons :

• 🧩 Comment créer des composants enfants et parents

• 🔄 Utiliser @Input() et @Output() pour la communication entre composants

• 🏗️ Structurer un projet Angular avec des feature modules

👉 Si cet article t’a aidé, n'hésite pas à le partager, laisser un commentaire ou t’abonner pour ne pas rater la suite !

---

©2025 Faouzi El Mansour – Angular Academy 🚀