Angular

Appearance

Qu'est qu'un composant sur Angular ? ​

Un composant est un élément fondamental d'une application Angular. Un composant est un module qui contient du code HTML, CSS et JavaScript pour afficher une partie de l'interface utilisateur d'une application.

Un composant Angular est défini par une classe qui contient des propriétés et des méthodes pour manipuler les données et l'interface utilisateur de la partie de l'application gérée par le composant. Un composant peut également inclure des modèles et des directives pour définir l'apparence et le comportement de l'interface utilisateur.

Les composants sont organisés en hiérarchie dans une application Angular, avec un composant principal (appelé composant racine) qui contient les autres composants de l'application. Les composants peuvent être imbriqués les uns dans les autres pour construire une application complexe en combinant des parties plus simples.

Les composants Angular sont importants pour la modularité et la réutilisabilité du code dans une application. Ils permettent de diviser l'application en parties plus petites et gérables, ce qui facilite la maintenance et l'évolution de l'application.

Comment créer un composant ? ​

Pour créer un composant fonctionnel sur Angular, vous devrez suivre les étapes suivantes:

  1. Ouvrez votre terminal et naviguez jusqu'au dossier de votre projet Angular.

  2. Utilisez la commande ng generate component suivi du nom que vous souhaitez donner à votre composant pour générer un nouveau composant. Par exemple, si vous souhaitez créer un composant appelé "mon-composant", vous pouvez utiliser la commande suivante:

sh
ng generate component mon-composant
ng generate component mon-composant
  1. Angular générera alors un nouveau dossier appelé "mon-composant" dans votre projet, avec les fichiers suivants:

  • mon-composant.component.html: ce fichier contient le code HTML de votre composant. C'est ici que vous définirez la structure et le contenu de votre composant.

  • mon-composant.component.ts: ce fichier contient le code TypeScript de votre composant. C'est ici que vous définirez les propriétés et les méthodes de votre composant.

  • mon-composant.component.css: ce fichier contient les feuilles de style CSS de votre composant. Vous pouvez utiliser ces feuilles de style pour styliser votre composant.

  1. Ouvrez le fichier mon-composant.component.ts et définissez les propriétés et les méthodes de votre composant en utilisant le code TypeScript. Vous pouvez utiliser les décorateurs de composant d'Angular (comme @Component et @Input) pour définir les propriétés du composant et la façon dont elles seront utilisées.

  2. Ouvrez le fichier mon-composant.component.html et définissez la structure et le contenu de votre composant en utilisant du code HTML. Vous pouvez utiliser les directives d'Angular (comme *ngFor et *ngIf) pour afficher des données et contrôler la logique de votre composant.

  3. Utilisez le fichier mon-composant.component.css pour styliser votre composant en utilisant du code CSS.

  4. Enfin, vous devrez importer votre composant dans le module de votre application (normalement app.module.ts) et l'ajouter à la liste des déclarations du module. Cela permettra à votre composant d'être utilisé dans les templates d'autres composants de votre application.

Voici un exemple de code de base pour un composant fonctionnel sur Angular:

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

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

  constructor() { }

  afficherTitre(): string {
    return this.titre;
  }
}
import { Component } from '@angular/core';

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

  constructor() { }

  afficherTitre(): string {
    return this.titre;
  }
}

Voici ce que chaque partie de ce code fait:

  • L'import de Component depuis @angular/core vous permet d'utiliser le décorateur de composant d'Angular dans votre code.

  • Le décorateur @Component définit les métadonnées de votre composant, comme le sélecteur (c'est-à-dire le nom de la balise HTML qui sera utilisée pour insérer votre composant dans un template), le template HTML et les feuilles de style CSS de votre composant.

  • La classe MonComposantComponent définit votre composant. Elle contient les propriétés et les méthodes de votre composant.

  • Les propriétés titre et description sont des variables qui contiendront les valeurs passées en entrée de votre composant.

  • Le constructeur de la classe est exécuté lorsque votre composant est créé. Vous pouvez y mettre du code d'initialisation si nécessaire.

  • La méthode afficherTitre retourne la valeur de la propriété titre de votre composant.

Pour utiliser ce composant dans un template d'un autre composant, vous pouvez insérer la balise <mon-composant> dans le template :

html
<mon-composant></mon-composant>
<mon-composant></mon-composant>

Ajouter le composant dans un module ​

Pour ajouter un composant dans un module sur Angular, vous devrez suivre les étapes suivantes:

  1. Ouvrez le fichier du module dans lequel vous souhaitez ajouter votre composant (par exemple, app.module.ts).

  2. Importez votre composant en ajoutant une ligne de code comme celle-ci:

ts
import { MonComposantComponent } from './mon-composant/mon-composant.component';
import { MonComposantComponent } from './mon-composant/mon-composant.component';
  1. Ajoutez votre composant à la liste des déclarations du module en ajoutant une ligne de code comme celle-ci:
ts
@NgModule({
  declarations: [
    MonComposantComponent
  ],
  // ... autres propriétés du module
})
export class AppModule { }
@NgModule({
  declarations: [
    MonComposantComponent
  ],
  // ... autres propriétés du module
})
export class AppModule { }

Cela permettra à Angular de reconnaître votre composant et de l'utiliser dans les templates des composants de votre application.

Exporter le composant ​

Pour exporter votre composant afin de pouvoir l'utiliser dans d'autres modules de votre application, vous devrez suivre les étapes suivantes:

  1. Ouvrez le fichier du module dans lequel votre composant est déclaré (par exemple, app.module.ts).

  2. Ajoutez votre composant à la liste des exports du module en ajoutant une ligne de code comme celle-ci:

ts
@NgModule({
  declarations: [
    MonComposantComponent
  ],
  exports: [
    MonComposantComponent
  ],
  // ... autres propriétés du module
})
export class AppModule { }
@NgModule({
  declarations: [
    MonComposantComponent
  ],
  exports: [
    MonComposantComponent
  ],
  // ... autres propriétés du module
})
export class AppModule { }
  1. Importez le module dans lequel votre composant est déclaré (par exemple, app.module.ts) dans le module où vous souhaitez utiliser votre composant en ajoutant une ligne de code comme celle-ci:
ts
import { AppModule } from './app.module';
import { AppModule } from './app.module';
  1. Ajoutez le module dans lequel votre composant est déclaré (par exemple, app.module.ts) à la liste des imports du module où vous souhaitez utiliser votre composant en ajoutant une ligne de code comme celle-ci:
ts
@NgModule({
  imports: [
    AppModule
  ],
  // ... autres propriétés du module
})
export class AutreModule { }
@NgModule({
  imports: [
    AppModule
  ],
  // ... autres propriétés du module
})
export class AutreModule { }

Vous pourrez alors utiliser votre composant dans les templates des composants de ce module en utilisant la balise HTML correspondante (par exemple, <mon-composant>).