> For the complete documentation index, see [llms.txt](https://dailyjournal.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dailyjournal.gitbook.io/notes/web-frameworks/angular/templates.md).

# 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.

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>`, and also to eliminate the risk of script injection attacks, it does not support the `<script>` element in templates.

## Template Statements

* Template statements are methods or properties that you can use in your HTML to respond to user events.&#x20;
* With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms.
* Template statements are used with elements, components, or directives in response to events.

#### Syntax <a href="#syntax" id="syntax"></a>

* the parser for template statements differs from the parser for template expressions.&#x20;
* the template statements parser specifically supports both basic assignment (`=`) and chaining expressions with semicolons (`;`).
* The following JavaScript and template expression syntax is not allowed:
  * `new` keyword
  * operators such as `++` , `--` , `+=` , `-=` , `|` and `&`

## Binding

## Event Binding

* Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

{% embed url="<https://angular.io/generated/images/guide/template-syntax/syntax-diagram.svg>" %}
event binding syntax
{% endembed %}

The event binding listens for the button's click events and calls the component's `onSave()` method whenever a click occurs.

## Two-way Binding

Use two-way binding to listen for events and update values simultaneously between parent and child components.

In two-way databinding, automatic synchronization of data happens between the Model and the View and changes is reflected in both components.&#x20;