Le composant app-component
Ce composant est le composant racine de ton application. On l'appelle souvent le shell car c'est celui qui est chargé en premier avec le template de base de ton application et c'est celui qui permet de charger les autres dans ce template.
Étape 1 : On supprime tout !!!
Comme tu l'as vu, Angular a déjà mis plein de choses par défaut dans ce composant pour ne pas avoir de page vide au lancement du projet. Comme le titre de cette section l'indique : on peut tout enlever !
Va dans le app.component.html
et supprime tout ! Mais vraiment tout !
Étape 2 : l'interpolation
Dans le fichier app.component.ts
, Angular a déjà mis une variable title = 'le nom de ton app';
.
Cette variable est accessible depuis le fichier HTML de ton AppComponent
, c'est ce qu'on appelle l'interpolation. 😊
À toi de jouer ! Va dans le fichier app.component.html
et ajoute :
Info
Le HTML utilise la double moustache {{ }}, appelé l'interpolation, pour afficher les variables du TypeScript.
Rends-toi sur http://localhost:4200/ et magiiie, tu as bien un titre qui est la valeur de ta variable !
Info
By the way... Est-ce que tu as remarqué que tu n'avais pas à relancer ton projet pour que l'affichage change à chaque fois que tu modifies ton code ? C'est ce qu'on appelle le hot reload.