Aller au contenu

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 :

<h1>Bienvenue sur ma super app : {{title}}</h1>

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.