Angular CLI a créer notre premier composant Angular, il est temps de voir à quoi cela ressemble concrètement, depuis le temps que vous en entendez parler ! 😀
Rendez-vous donc dans le fichier app.component.ts de votre projet.
Nous allons modifier un peu le code de ce composant, car il a été généré par Angular CLI et il y a pas mal de code inutile pour nous. Remplacez le code existant du fichier app.component.ts par ceci:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>Hello, {{name}} !</h1>`, }) export class AppComponent { name = 'Angular'; }
Nous allons prendre un peu de temps pour décrire ce fichier, car malgré sa taille réduite, ce code est composé de trois parties différentes.
D’abord, on importe les éléments dont on va avoir besoin dans notre fichier. A la ligne 1, on importe l’annotation Component depuis le cœur de Angular : @angular/core. Retenez donc simplement la syntaxe suivante :
import { UnElement } from { quelque-part };
Un composant doit au minimum importez l’annotation Component, bien sûr.
Ensuite, de la ligne 3 à la ligne 6, on aperçoit l’annotation @Component qui nous permet de définir un composant. L’annotation d’un composant doit au minimum comprendre deux éléments : selector et template.
Enfin, à la ligne 7, on retrouve le code de la classe de notre composant. C’est cette classe qui contiendra la logique de notre composant. Le mot-clef export permet de rendre le composant accessible pour d’autres fichiers.
Par convention, on suffixe le nom des composants par Component : la classe du composant app est donc AppComponent.