8. Implémenter notre premier composant Angular

Angular CLI a créé 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.

• Selector  permet de donner un nom à votre composant afin de l’identifier par la suite. Par exemple, notre composant se nomme ici pokemon-app, ce qui signifie que dans notre page web, c’est la balise qui sera insérée. Et ce code sera parfaitement valide. Vous vous rappelez du chapitre sur les Web Components ?
• Quant à l’instruction template, elle permet de définir le code HTML du component (On peut bien sûr définir notre template dans un fichier séparé avec l’instruction templateUrl à la place de template, afin d’avoir un code plus découpé et plus lisible). Ici, vous pouvez deviner que la syntaxe avec les doubles accolades permet d’afficher la variable déclarée à la ligne 7. Il s’agit de l’interpolation, que nous verrons dans le chapitre sur les templates. En attendant, retenez que ce template affiche « Hello, Angular » pour l’utilisateur.

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.