Template Syntax

Last update on July 09 2024 13:10:59 (UTC/GMT +8 hours)

The Angular application manages what the user sees and does, it achieves this through the interaction of a component class instance (the component) and its user-facing template.

We can recall vividly from our experience in MVC(Model-View-Controller) or MVVM(Model-View-ViewModel), where the controllers and viewmodel oversee the user interaction with the models. Similarly, in Angular, the component plays the part of the controllers or viewmodels while the template represents the view.

HTML in templates

HTML is the language of the Angular template. Almost all HTML syntax is valid template syntax. Except the <script> tag, which is a notable exception; it is forbidden, eliminating the risk of script injection attacks.

In practice, when the <script> is encountered, it is ignored and a warning is logged in the browser console. Some legal HTML doesn't make much sense in a template. Some common tags like <html>, <body>, and <base> elements have no useful role.

The HTML can pretty much be extended with components and directives that appear as new elements and attributes, which we will explore in this section.

Interpolation and Template Expressionsle

Interpolation allows you to incorporate calculated strings into the text between HTML element tags and within attribute assignments. Template expressions are what you use to calculate those strings.

With interpolation, calculated values or variables can be displayed in the HTML template.

Interpolation {{...}}

Interpolation in Angular is used to display variables or calculated values in the template. This is done using the two curly braces `{{…}}` as shown

In the following code snippet, {{currentUser}} and {{itemImageUrl}} is an example of interpolation

<h3>Current User: {{currentUser}}</h3>
<div><img src="{{itemImageUrl}}"></div>

Template Expressions

In Angular, template expressions are computations or assignments done in the template inside the interpolation curly braces. This expression is considered as local and only exist inside the template.

Complex expressions or assignment are discouraged to be done inside the template expressions as complex logics are advised to only be done in the components. Some examples of template expressions include

<p>The sum of 1 + 1 is {{1 + 1}}.</p>
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>

Template statements

A template statement responds to an event raised by a binding target such as an element, component, or directive. Template statements are written in the format (event)="statement". As illustrated in the code snippet.

<button (click)="deleteUser()">Delete hero</button>

A template statement has a side effect. That's the whole point of an event. It's how you update application state from a user action.

Template statements only exist within the context of a given template. They do not refer to Global variables.

Binding syntax: An overview

Data binding is a mechanism for coordinating what users see, with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these chores over to a binding framework. You simply declare bindings between binding sources and target HTML elements and let the framework do the work.

Binding types can be grouped into three categories distinguished by the direction of data flow:

source-to-view
view-to-source
view-to-source-to-view

source-to-view: One way, from the data source to the view data. The Syntax is this:

[target]="expression"
bind-target="expression"

view-to-source:One way, from the view target to the data source. The Syntax is this:

(target)="statement"
on-target="statement"

view-to-source-to-view:Two way, from the view target to the data source, and vice versa The Syntax is this:

[(target)]="statement"
bindon-target="expression"

The target name is the name of a property. It may look like the name of an attribute but it never is. To appreciate the difference, you must develop a new way to think about template HTML.

Previous: Introduction to modules
Next: Component Interactions