An explanation of Angular template syntax

This article mainly introduces the explanation of Angular template syntax, which has certain reference value. Now I share it with you. Friends in need can refer to it

Introduction to Template Syntax

1. Interpolation expression

<p>Hello {{name}}</p>

Angular evaluates all expressions in double curly braces, converts the evaluation results into strings, and combines them with adjacent strings Literals are concatenated. Finally, assign the combined interpolation result to the attribute of the element or directive.

On the surface, you insert the result between the element tags and assign values ​​to the tag attributes. It's convenient to think about it this way, and this misunderstanding rarely gets you into trouble. But strictly speaking, this is not true. Interpolation expressions are a special syntax that Angular converts into property bindings.

is equivalent to

<p [textContent]="interpolate([&#39;Hello&#39;], [name])"></p>

2. Template expression

Template expression produces a value. Angular executes this expression and assigns it to the property of the binding target, which may be an HTML element, component, or directive.

The value of the input attribute is a constant

<show-title title="Some Title"></show-title>

Equivalent to

<show-title [title]="&#39;Some Title&#39;"></show-title>

The value of the input attribute is a variable

<show-title [title]="someTitle"></show-title>

Don’t forget the square brackets, square brackets Tells Angular to evaluate the template expression. If you forget to add the square brackets, Angular will treat the expression as a string constant and use the string to initialize the target property. It will not evaluate the string.

Template variable

The let keyword before hero creates a template input variable named hero. The ngFor directive iterates over the heroes array returned by the parent component's heroes property, assigning the current element from the array to the hero variable on each iteration.

<p *ngFor="let hero of heroes">{{hero.name}}</p>

Template reference variables

Template reference variables are usually used to reference a DOM element in the template. It can also reference Angular components or instructions or Web Components. Use the pound sign (#) to declare reference variables. #phone means to declare a variable named phone to reference the element. This template reference variable can be referenced anywhere in the template.

<input #phone placeholder="phone number">

Template statements

Template statements are used to respond to events triggered by binding targets (such as HTML elements, components, or directives).

<date-picker (dateChanged)="statement()"></date-picker>

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use the Angular-UI Bootstrap component to implement alerts

For config/index.js in vue: Detailed explanation of configuration

The above is the detailed content of An explanation of Angular template syntax. For more information, please follow other related articles on the PHP Chinese website!