Template syntax

Angular applications manage what users see and do through instances of Component classes (components) and user-facing template interactions.

Many developers are familiar with the concepts of components and templates from their experience with model-View-Controller (MVC) or model-View-View model (MVVM). In Angular, components play the role of controller or viewmodel, and templates play the role of view.

This is a technical guide to the Angular template language. It explains the fundamentals of the template language and describes most of the syntax you will encounter elsewhere in the document.

Interpolation and template expressions

Interpolation lets you combine computed strings into text between HTML element tags and within attribute assignment statements. Template expressions are used to allow you to find these strings.

Interpolation expression

“Interpolation” is the embedding of expressions into markup text. By default, interpolation expressions are delimited by double curly braces {{and}}.

In the code snippet below, {{currentCustomer}} is an example of an interpolation.

<h3>Current customer: {{ currentCustomer }}</h3>
Copy the code

Interpolation can also assign values to attributes of tags

<img src="{{itemImageUrl}}">
Copy the code

Angular evaluates the data between parentheses and converts it to a string

<p>1 +1= {{1 +1}}</p> // will generate 1+1=2Copy the code

Interpolation can also call methods defined in the component for evaluation

Template: <p> Call expression: getData()</p> Component:getData() {return "hello world"
}
Copy the code

Output:

Angular evaluates all expressions in double curly braces, converts them to strings, and concatenates them with adjacent string literals. Finally, the combined interpolation results are assigned to the attributes of the element or instruction. On the surface, it looks as if you have inserted the result between the element tags and assigned the tag attributes.

Template expression

The template expression produces a value that appears in the double curly braces {{}}. Angular executes the expression and assigns it to a property of the binding target, which could be an HTML element, component, or directive.

The template expression contained in {{1 + 1}} is 1 + 1. In the property binding, you’ll see the template expression again in quotes to the right of =, like this: [property]=”expression”.

In syntax, template expressions are very similar to JavaScript. Many JavaScript expressions are legitimate template expressions, but there are a few exceptions.

You cannot use JavaScript expressions that have or may cause side effects, including:

  • Assign (=, +=, -=,…)

  • Operators such as new, typeof, and Instanceof.

  • Use; Or, you know, a series of expressions

  • The increment and decrement operators: ++ and —

  • Some ES2015+ version operators

Other notable differences from JavaScript syntax include:

  • Do not support the operation, such as | and &

  • New template expression operators, such as |,? And! .