On this page
Understanding templates
In Angular, a template is a blueprint for a fragment of a user interface (UI). Templates are written in HTML, and special syntax can be used within a template to build on many of Angular's features.
Prerequisites
Before learning template syntax, you should be familiar with the following:
- Angular concepts
- JavaScript
- HTML
- CSS
Enhancing HTML
Angular extends the HTML syntax in your templates with additional functionality. For example, Angular’s data binding syntax helps to set Document Object Model (DOM) properties dynamically.
Almost all HTML syntax is valid template syntax. However, because an Angular template is only a fragment of the UI, it does not include elements such as <html>
, <body>
, or <base>
.
To eliminate the risk of script injection attacks, Angular does not support the
<script>
element in templates. Angular ignores the<script>
tag and outputs a warning to the browser console. For more information, see the Security page.
More on template syntax
You might also be interested in the following:
Learn how to use interpolation and expressions in HTML.
Property bindingSet properties of target elements or directive @Input() decorators.
Attribute bindingSet the value of attributes.
Class and style bindingSet the value of class and style.
Event bindingListen for events and your HTML.
Template reference variablesUse special variables to reference a DOM element within a template.
Built-in directivesListen to and modify the behavior and layout of HTML.
Inputs and OutputsShare data between the parent context and child directives or components.
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v14.angular.io/guide/template-overview