Guides approfondis
Templates

Syntaxe de template

Dans Angular, un template est un morceau de HTML. Utilisez une syntaxe spéciale dans un template pour tirer parti de nombreuses fonctionnalités d'Angular.

Astuce : Consultez les Fondamentaux d'Angular avant de vous plonger dans ce guide complet.

Chaque composant Angular possède un template qui définit le DOM que le composant rend sur la page. Grâce aux templates, Angular peut automatiquement maintenir votre page à jour quand les données changent.

Les templates se trouvent généralement soit dans la propriété template d'un fichier *.ts, soit dans le fichier *.html. Pour en savoir plus, consultez le guide approfondi sur les composants.

Comment fonctionnent les templates ?

Les templates reposent sur la syntaxe HTML, avec des fonctionnalités supplémentaires comme des fonctions de template intégrées, le data binding, l'écoute d'événements, des variables, et plus encore.

Angular compile les templates en JavaScript afin de se construire une représentation interne de votre application. L'un des avantages de cette approche réside dans les optimisations de rendu intégrées qu'Angular applique automatiquement à votre application.

Différences avec le HTML standard

Voici quelques différences entre les templates et la syntaxe HTML standard :

  • Les commentaires présents dans le code source du template ne sont pas inclus dans le rendu final
  • Les éléments de composants et de directives peuvent être auto-fermants (par exemple, <UserProfile />)
  • Les attributs comportant certains caractères (comme [], (), etc.) ont une signification particulière pour Angular. Consultez la documentation sur les bindings et la documentation sur l'ajout d'event listeners pour plus d'informations.
  • Le caractère @ a une signification particulière pour Angular et sert à ajouter un comportement dynamique aux templates, comme le control flow. Vous pouvez inclure un caractère @ littéral en l'échappant sous forme d'entité HTML (&commat; ou &#64;).
  • Angular ignore et réduit les caractères d'espacement inutiles. Consultez les espaces dans les templates pour plus de détails.
  • Angular peut ajouter des nœuds de commentaire à une page comme placeholders pour du contenu dynamique, mais les développeurs peuvent les ignorer.

Par ailleurs, bien que la majeure partie de la syntaxe HTML soit une syntaxe de template valide, Angular ne prend pas en charge l'élément <script> dans les templates. Pour plus d'informations, consultez la page Sécurité.

Et ensuite ?

Les sujets suivants pourraient également vous intéresser :

Sujets Détails
Lier du texte, des propriétés et des attributs dynamiques Liez des données dynamiques à du texte, des propriétés et des attributs.
Ajouter des event listeners Réagissez aux événements dans vos templates.
Two-way binding Lie une valeur et propage ses changements simultanément.
Control flow Affichez, masquez et répétez des éléments de manière conditionnelle.
Pipes Transformez des données de manière déclarative.
Insérer du contenu enfant avec ng-content Contrôlez la manière dont les composants rendent le contenu.
Créer des fragments de template avec ng-template Déclarez un fragment de template.
Regrouper des éléments avec ng-container Regroupez plusieurs éléments ou marquez un emplacement de rendu.
Variables dans les templates Découvrez les déclarations de variables.
Chargement différé avec @defer Créez des vues différables avec @defer.
Syntaxe des expressions Découvrez les similitudes et les différences entre les expressions Angular et le JavaScript standard.
Espaces dans les templates Découvrez comment Angular gère les espaces.