Tip: Check out Angular's Essentials before diving into this comprehensive guide.
Each Angular template in your application is a section of HTML to include as a part of the page that the browser displays. An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.
When you generate an Angular application with the Angular CLI, the app.component.html file is the default template containing placeholder HTML.
The template syntax guides show you how to control the UX/UI by coordinating data between the class and the template.
Empower your HTML
Extend the HTML vocabulary of your applications with special Angular syntax in your templates. For example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding.
Almost all HTML syntax is valid template syntax.
However, because an Angular template is part of an overall webpage, and not the entire page, you don't need to include elements such as <html>, <body>, or <base>, and can focus exclusively on the part of the page you are developing.
IMPORTANT: 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:
| Topics | Details |
|---|---|
| Interpolation | Learn how to use interpolation and expressions in HTML. |
| Template statements | Respond to events in your templates. |
| Binding syntax | Use binding to coordinate values in your application. |
| Property binding | Set properties of target elements or directive @Input() decorators. |
| Attribute, class, and style bindings | Set the value of attributes, classes, and styles. |
| Event binding | Listen for events and your HTML. |
| Two-way binding | Share data between a class and its template. |
| Built-in directives | Listen to and modify the behavior and layout of HTML. |
| Template reference variables | Use special variables to reference a DOM element within a template. |
| Inputs | Accepting data with input properties |
| Outputs | Custom events with outputs |
| SVG in templates | Dynamically generate interactive graphics. |