Vous avez commencé votre exploration d’Angular, et vous voilà prêt à approfondir votre compréhension des composants, les briques essentielles de toute application Angular ? Vous vous demandez comment les créer, comment les utiliser, et comment ils interagissent entre eux pour donner vie à vos interfaces utilisateur ? Dans cet article, nous allons explorer ensemble la création de composants avec Angular CLI, l’utilisation des directives structurelles ngIf, ngFor et ngClass, ainsi que les nouvelles syntaxes @if et @for introduites avec Angular 17, et enfin, nous allons aborder la communication entre composants via @Input et @Output. Préparez-vous à devenir un maître de la création de composants Angular !

Les composants Angular : l’essence même de vos interfaces

Dans Angular, tout est composant. Une page web, un bouton, une zone de texte, un tableau, une image… Chaque élément de votre interface est un composant à part entière, et c’est la combinaison de ces composants qui forme votre application. Un composant est un élément réutilisable, qui encapsule la logique (le code TypeScript), le modèle (le template HTML) et le style (le CSS) d’une partie de l’interface utilisateur.

Imaginez les composants comme les pièces d’un jeu de construction. Chaque pièce a sa propre forme, sa propre fonction, et c’est leur assemblage intelligent qui permet de créer des structures complexes et variées. En maîtrisant la création et l’utilisation des composants, vous aurez la clé pour construire des interfaces utilisateur dynamiques, modulaires et maintenables.

Créer un composant avec Angular CLI : simplicité et rapidité

Angular CLI (Command Line Interface) est un outil puissant qui simplifie grandement le travail avec Angular. Pour créer un composant, il suffit d’utiliser la commande ng generate component (ou ng g c pour faire plus court) :

ng generate component mon-nouveau-composant

Cette commande générera un nouveau dossier mon-nouveau-composant dans votre dossier src/app, contenant les fichiers suivants :

• mon-nouveau-composant.component.ts : la logique du composant (classe TypeScript)

• mon-nouveau-composant.component.html : le modèle HTML du composant

• mon-nouveau-composant.component.css : le style CSS du composant

• mon-nouveau-composant.component.spec.ts : le fichier de test unitaire du composant

Vous pouvez également créer un composant dans un sous-dossier spécifique en utilisant la commande suivante :

ng generate component composants/mon-nouveau-composant

Angular CLI est un outil qui vous fait gagner un temps précieux en automatisant la création de la structure de base de vos composants.

Les directives structurelles : donner vie à vos templates

Les directives structurelles sont des outils puissants qui vous permettent de manipuler le DOM (Document Object Model) de vos templates HTML. Elles permettent d’ajouter, de supprimer ou de modifier des éléments HTML en fonction de certaines conditions. Nous allons explorer ici les directives les plus courantes et leurs nouvelles syntaxes introduites avec Angular 17 : *ngIf, *ngFor, ngClass (et les nouvelles syntaxes @if, @for):

1. ngIf et @if: afficher ou masquer des éléments conditionnellement

La directive ngIf (et sa nouvelle syntaxe @if introduite avec Angular 17) permet d’afficher ou de masquer un élément HTML en fonction d’une condition. C’est idéal pour afficher des messages d’erreur, des formulaires ou des éléments contextuels :

Syntaxe avec *ngIf :

<p *ngIf="afficherMessage">Ce message s'affiche si afficherMessage est vrai.</p>

Syntaxe avec @if (Angular 17+) :

@if (afficherMessage) {
  <p>Ce message s'affiche si afficherMessage est vrai.</p>
}

Exemple d’utilisation :

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

@Component({
  selector: 'app-mon-composant',
  templateUrl: './mon-composant.component.html',
  styleUrls: ['./mon-composant.component.css'],
})
export class MonComposantComponent {
  afficherMessage = true;

  toggleMessage() {
    this.afficherMessage = !this.afficherMessage;
  }
}

<p *ngIf="afficherMessage">Ce message est affiché avec ngIf.</p>
@if (afficherMessage) {
  <p>Ce message est affiché avec @if.</p>
}
<button (click)="toggleMessage()">Afficher/Masquer</button>

Dans cet exemple, le paragraphe ne s’affiche que si la propriété afficherMessage est true. Un bouton permet de modifier cette propriété.

2. ngFor et @for : boucler et afficher des listes d’éléments

La directive ngFor (et sa nouvelle syntaxe @for introduite avec Angular 17) permet d’afficher une liste d’éléments HTML en itérant sur un tableau de données. Elle est idéale pour afficher des listes d’articles, des tableaux ou des menus :

Syntaxe avec *ngFor :

<ul>
  <li *ngFor="let item of maListe">{{ item }}</li>
</ul>

Syntaxe avec @for (Angular 17+) :

<ul>
  @for (item of maListe; track item) {
      <li>{{ item }}</li>
  }
</ul>

Exemple d’utilisation :

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

@Component({
  selector: 'app-mon-composant',
  templateUrl: './mon-composant.component.html',
  styleUrls: ['./mon-composant.component.css'],
})
export class MonComposantComponent {
  maListe = ['Item 1', 'Item 2', 'Item 3'];
}

<ul>
  <li *ngFor="let item of maListe">{{ item }}</li>
</ul>

<ul>
  @for (item of maListe; track item) {
      <li>{{ item }}</li>
  }
</ul>

Dans cet exemple, une liste HTML est générée à partir du tableau maListe. Chaque élément du tableau est affiché dans un élément <li>. La nouvelle syntaxe avec @for inclut un attribut track qui doit suivre la propriété de l’élément dans le tableau, dans notre exemple, track item car notre tableau est un tableau de string.

3. ngClass : appliquer des styles dynamiquement

La directive ngClass permet d’appliquer des classes CSS à un élément HTML en fonction de conditions dynamiques. C’est idéal pour modifier l’apparence d’un élément en fonction de l’état de votre application :

<div [ngClass]="{'classe-active': estActif, 'classe-disabled': !estActif}">
  Ce bloc a un style dynamique
</div>

Exemple d’utilisation :

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

@Component({
  selector: 'app-mon-composant',
  templateUrl: './mon-composant.component.html',
  styleUrls: ['./mon-composant.component.css'],
})
export class MonComposantComponent {
  estActif = true;

  toggleActif() {
    this.estActif = !this.estActif;
  }
}

.classe-active {
  background-color: green;
  color: white;
}
.classe-disabled {
    background-color: grey;
    color: black;
}

<div [ngClass]="{'classe-active': estActif, 'classe-disabled': !estActif}">
  Ce bloc a un style dynamique
</div>
<button (click)="toggleActif()">Activer/Désactiver</button>

Dans cet exemple, la div a une classe classe-active ou classe-disabled en fonction de la valeur de la propriété estActif.

La communication entre composants : @Input et @Output

Les composants ne vivent pas isolément. Ils doivent souvent communiquer entre eux pour échanger des données et des événements. Angular offre deux mécanismes principaux pour cela : @Input et @Output.

1. @Input : transmettre des données d’un parent à un enfant

Le décorateur @Input permet à un composant enfant de recevoir des données de son composant parent. On définit une propriété d’entrée dans le composant enfant avec le décorateur @Input() et on passe la valeur depuis le composant parent :

Composant enfant :

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

@Component({
  selector: 'app-composant-enfant',
  templateUrl: './composant-enfant.component.html',
  styleUrls: ['./composant-enfant.component.css'],
})
export class ComposantEnfantComponent {
  @Input() messageDuParent: string = '';
}

<p>Message du parent: {{ messageDuParent }}</p>

Composant parent :

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

@Component({
  selector: 'app-mon-composant',
  templateUrl: './mon-composant.component.html',
  styleUrls: ['./mon-composant.component.css'],
})
export class MonComposantComponent {
  message = 'Bonjour depuis le composant parent !';
}

<app-composant-enfant [messageDuParent]="message"></app-composant-enfant>

Dans cet exemple, le composant parent passe la valeur de sa propriété message au composant enfant via la propriété d’entrée messageDuParent.

2. @Output : envoyer des événements d’un enfant à un parent

Le décorateur @Output permet à un composant enfant d’envoyer des événements à son composant parent. On définit une propriété de sortie dans le composant enfant avec le décorateur @Output(), on crée un EventEmitter et on émet un événement lorsque l’action se produit :

Composant enfant :

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-composant-enfant',
  templateUrl: './composant-enfant.component.html',
  styleUrls: ['./composant-enfant.component.css'],
})
export class ComposantEnfantComponent {
  @Output() clicBouton = new EventEmitter<string>();

  onClick() {
    this.clicBouton.emit('Le bouton a été cliqué dans le composant enfant.');
  }
}

<button (click)="onClick()">Cliquez ici dans le composant enfant</button>

Composant parent :

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

@Component({
  selector: 'app-mon-composant',
  templateUrl: './mon-composant.component.html',
  styleUrls: ['./mon-composant.component.css'],
})
export class MonComposantComponent {
  messageDuBouton = '';

  onBoutonEnfantClick(message: string) {
    this.messageDuBouton = message;
  }
}

<app-composant-enfant (clicBouton)="onBoutonEnfantClick($event)"></app-composant-enfant>
<p>{{ messageDuBouton }}</p>

Dans cet exemple, le composant enfant émet un événement clicBouton lorsque le bouton est cliqué, et le composant parent écoute cet événement et met à jour la propriété messageDuBouton.

Vous avez maintenant une vision globale des composants Angular, de leur création à leur interaction. Vous avez appris à utiliser les directives ngIf, ngFor et ngClass (et leurs nouvelles syntaxes @if et @for introduites avec Angular 17) pour manipuler le DOM de vos templates, et vous savez comment les composants communiquent entre eux via @Input et @Output. Avec ces connaissances, vous êtes prêt à créer des interfaces utilisateur dynamiques, modulaires et maintenables.

Et vous, quelles sont vos expériences avec les composants Angular ? Quelles sont les difficultés que vous rencontrez ? N’hésitez pas à partager vos questions, vos commentaires et vos retours d’expérience !