Créer un composant Angular

Comment créer un composant Angular, c’est ce que nous allons découvrir ici. Les différents fichiers et l’explication de chacun d’eux seront détaillés dans cet article. Nous créerons un nouveau composant de manière entièrement manuelle et aussi avec la manière automatique prévue dans Angular.

Le composant principal

Comme détaillé dans mon dernier article sur Angular (Introduction à Angular), un composant est fait de plusieurs fichiers. Regardons ceux de notre application principale :

• app.component.html : c’est le template html, le design html du composant et donc dans le cas du composant principal, c’est le design de la page principale de notre application web
• app.component.css : c’est le fichier de style css de notre composant
• app.component.ts : c’est le code typescript de notre composant -> c’est dans cette partie qu’on déclare :
  • Le selector : comment va apparaître notre composant dans la partie html (avec le code par défaut, il apparaît sous la forme d’un élément html <app-root></app-root>
  • Le templateUrl : l’endroit où se trouve le fichier template html de notre composant
  • Le styleUrls : l’endroit où se trouve le fichier css de notre composant

Tout ça sera détaillé dans la partie suivante « créer un composant manuellement ».

Après avoir bien regardé, on peut voir qu’on a un fichier supplémentaire qui n’est pas lié au composant mais au module principal : app.module.ts. Celui-ci contient la liste des composants de l’application ainsi que la liste des imports pour l’utilisation de certains packages dans nos composants.

Voici donc comment Angular fonctionne :

• La page index.html est la première page chargée. Le compilateur va générer avec tous nos javascripts un bundle (un fichier avec tout dedans) qu’il va inclure automatiquement à cet index.html pour charger le tout.
• Le premier fichier javascript appelé, c’est main.ts
  • Celui-ci fait tout un tas d’import pour pouvoir utiliser angular et via la commande boostrapModule, il indique que le module principal de l’application web à charger c’est le module app.module (le .ts est facultatif ici).
• Du coup, on arrive dans notre app.module.ts qui lui déclare tous les composants. Hors dans notre index.html, on a bien notre composant <app-root></app-root> qui est déclaré et donc qui appelle notre composant app.component.ts qui lui déclare le template html, le fichier css …

Bref : index.html -> main.ts -> app.module.ts -> app.component.ts -> app.component.html, .css …

Créer un composant manuellement

Pour créer un composant manuellement, il suffit donc de créer un sous-dossier dans le dossier app. En effet, app, c’est le composant racine, on se met donc en dessous de celui-ci.

• On crée donc un sous-dossier exemple : « test » dans le dossier « app ».
• On crée un fichier test.component.html qui contient l’html de notre composant
• On crée un fichier test.component.css qui contient notre style css pour ce composant (pas obligatoire)
• On crée un fichier test.component.ts qui indique que notre composant est formé d’un élément html <app-test></app-test> et au minimum d’un fichier html (le fichier css étant optionnel). Voir ci-dessous:

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

@Component ({
    selector: 'app-test',
    templateUrl: 'test.component.html'
})
export class TestComponent {

}

Pour les explications, voici ce que fait cette classe typescript :

• L’import « import { Component } … » permet d’utiliser @Component qui indique que notre classe (export class TestComponent) est un composant. Dans ce @Component, on peut indiquer le selector etc (les propriétés déjà vues). Ensuite vient notre classe proprement dite (une classe typescript) : TestComponent qu’on exporte pour qu’elle soit visible en dehors de notre fichier ts.

A présent, il faut que ce composant soit inclus dans l’html de notre application web donc dans le template html app.component.html. Voici comment faire :

Voici mon composant de test : <app-test></app-test>

Le problème est que notre application ne connait pas encore ce composant, il faut l’importer. Pour se faire, on va modifier app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

On ajoute donc un import {} au début pour notre TestComponent et ensuite, on ajoute notre TestComponent dans les déclarations du module.

Créer un composant Angular avec la commande ng

Il existe une commande ng qui permet de générer directement un composant.

Pou se faire allez dans le terminal de Visual Studio Code et tapez simplement la commande suivante :

ng generate component test
ou
ng g c test

Cette commande génère un composant nommé « test ». Elle génère les fichiers mais aussi les imports nécessaires dans app.module.ts. Il ne reste plus qu’à compléter les fichiers html et css et à utiliser notre composant dans app.component.html.

C’est simple

Vous avez donc vu à quel point il peut être facile de créer un nouveau composant dans Angular. Lorsque vous avez fait l’exercice une ou deux fois, cela devient une habitude et très facile à faire.

J’espère que cet article vous aura plu. N’hésitez pas à me laisser un commentaire (avis, suggestion etc.) tout est le bienvenu. N’hésitez pas non plus à liker et partager cet article et à vous inscrire sur le blog pour ne manquer aucun article. Je vous dis à très bientôt en espérant vous revoir rapidement sur ce blog.