2019-12-02 20:47:19 +00:00
# Template syntax
2017-03-30 19:04:18 +00:00
2020-04-28 20:26:58 +00:00
In Angular, a *template* is a chunk of HTML.
2021-07-21 05:01:39 +00:00
Use special syntax within a template to build on many of Angular's features.
2017-02-22 18:09:39 +00:00
2020-04-28 20:26:58 +00:00
## Prerequisites
2017-02-22 18:09:39 +00:00
2020-04-28 20:26:58 +00:00
Before learning template syntax, you should be familiar with the following:
2017-06-09 08:05:16 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
* [Angular concepts ](guide/architecture )
* JavaScript
* HTML
* CSS
2017-06-09 08:05:16 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
<!-- todo: Do we still need the following section? It seems more relevant to those coming from AngularJS, which is now 7 versions ago. -->
2020-04-28 20:26:58 +00:00
<!-- You may be familiar with the component/template duality from your experience with model - view - controller (MVC) or model - view - viewmodel (MVVM).
In Angular, the component plays the part of the controller/viewmodel, and the template represents the view. -->
2017-02-22 18:09:39 +00:00
2021-07-21 05:01:39 +00:00
Each Angular template in your application is a section of HTML to include as a part of the page that the browser displays.
2020-04-28 20:26:58 +00:00
An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.
2018-10-09 18:32:58 +00:00
2021-03-19 19:03:22 +00:00
When you generate an Angular application with the Angular CLI, the `app.component.html` file is the default template containing placeholder HTML.
2017-02-22 18:09:39 +00:00
2021-07-21 05:01:39 +00:00
The template syntax guides show you how to control the UX/UI by coordinating data between the class and the template.
2017-02-22 18:09:39 +00:00
2020-04-28 20:26:58 +00:00
< div class = "is-helpful alert" >
2017-02-22 18:09:39 +00:00
2021-03-19 19:03:22 +00:00
Most of the Template Syntax guides have dedicated working example applications that demonstrate the individual topic of each guide.
To see all of them working together in one application, see the comprehensive < live-example title = "Template Syntax Live Code" > < / live-example > .
2017-03-27 15:08:53 +00:00
2017-04-10 15:51:13 +00:00
< / div >
2017-02-22 18:09:39 +00:00
2020-04-28 20:26:58 +00:00
## Empower your HTML
2018-12-03 18:42:53 +00:00
2023-12-09 18:49:48 +00:00
Extend the HTML vocabulary of your applications with special Angular syntax in your templates.
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
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.
2018-12-03 18:42:53 +00:00
2020-04-28 20:26:58 +00:00
Almost all HTML syntax is valid template syntax.
2021-07-21 05:01:39 +00:00
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.
2017-03-11 13:44:25 +00:00
2020-04-28 20:26:58 +00:00
< div class = "alert is-important" >
2017-03-30 19:04:18 +00:00
2020-04-28 20:26:58 +00:00
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 ](guide/security ) page.
2019-01-08 20:58:23 +00:00
< / div >
2017-02-22 18:09:39 +00:00
2020-04-28 20:26:58 +00:00
## More on template syntax
2019-06-26 06:16:04 +00:00
2021-07-21 05:01:39 +00:00
You might also be interested in the following:
2019-06-26 06:16:04 +00:00
docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
2022-03-10 16:48:09 +00:00
| Topics | Details |
|:--- |:--- |
| [Interpolation ](guide/interpolation ) | Learn how to use interpolation and expressions in HTML. |
| [Template statements ](guide/template-statements ) | Respond to events in your templates. |
| [Binding syntax ](guide/binding-syntax ) | Use binding to coordinate values in your application. |
| [Property binding ](guide/property-binding ) | Set properties of target elements or directive `@Input()` decorators. |
| [Attribute, class, and style bindings ](guide/attribute-binding ) | Set the value of attributes, classes, and styles. |
| [Event binding ](guide/event-binding ) | Listen for events and your HTML. |
| [Two-way binding ](guide/two-way-binding ) | Share data between a class and its template. |
| [Built-in directives ](guide/built-in-directives ) | Listen to and modify the behavior and layout of HTML. |
| [Template reference variables ](guide/template-reference-variables ) | Use special variables to reference a DOM element within a template. |
| [Inputs and Outputs ](guide/inputs-outputs ) | Share data between the parent context and child directives or components |
| [Template expression operators ](guide/template-expression-operators ) | Learn about the pipe operator \(< code > | </ code > \), and protect against `null` or `undefined` values in your HTML. |
| [SVG in templates ](guide/svg-in-templates ) | Dynamically generate interactive graphics. |
<!-- links -->
<!-- external links -->
<!-- end links -->
@reviewed 2022-02-28
