4.3. Le Template

Un template ? C’est quoi ? 🤔

Ne vous inquiétez pas, c’est simplement une « vue », associée à un composant.

En fait, à chaque fois que l’on définit un composant, on lui associe toujours un template. Un template est une forme de HTML spéciale qui dit à Angular ce que doit afficher le composant. Parfois, un template contient simplement du HTML traditionnel.

Par exemple, le code ci-dessous pourrait être un template Angular, sans aucun problème :

<h1>Blog sur Angular</h1> 
<p>Bienvenue sur mon blog, je m'appelle Jean Dupond !</p>

Mais parfois on a besoin d’injecter dans notre template des informations issues du composant lui-même :

<h1>Blog sur Angular</h1> 
<p>Bienvenue sur mon blog, je m'appelle {{ prenomAuteur }} !</p>

Vous voyez l’idée ?

La syntaxe avec les accolades {{prenomAuteur}} indique à Angular, que cette variable n’est pas disponible dans le template, et que la valeur de cette variable se trouve dans le composant qui gère ce template. En dehors de cette nouvelle syntaxe, que nous verrons dans un chapitre dédié, vous reconnaissez les balises HTML classiques <h1> et <p>.