Angular Template
This post is the notes of Official Angular Document. This amazing document can be found here.
The Angular application manages what the user sees and can do, achieving this through the interaction of a component class instance (the component) and its user-facing template.
In Angular, the component plays the part of the controller/viewmodel, and the template represents the view. It is essentially the MVC and MVVM structure.
1. HTML in templates
<script>is forbidden, eliminating the risk of script injection attacks.<html>,<body>andbaseelements have no useful role.
2. Interpolation
Interpolation allows you to incorporate calculated strings into the text between HTML element tags and within attribute assignments.
Its syntax is . The text between the braces is often the name of a component property. Angular replaces that name with the string values of the corresponding component property. More generally, the text between the braces is a template expression that Angular first evaluates and then converts to a string. For example,
<p> The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}.</p>Angular evaluates all expressions in double curly braces, converts the expression results to strings, and links them with neighboring literal strings. Finally, it assigns this composite interpolated result to an element or directive property.
We can insert the result between element tags and assigning it to the attributes. However, interpolation is a syntax that Angular converts into a property binding.
3. Template Expressions
A template expression produces a value and appears within the double curly braces. Angular executes the expression and assigns it to a property of a binding target; the target could be an HTML element, a component, or a directive.
In terms of syntax, template expressions are similar to JavaScript. Many JS expressions are legal template expressions, with a few exceptions.
You can’t use JavaScript expressions that have or promote side effects, including:
- Assignments
(=, +=, -=, ...) - Operators such as new, typeof, instanceof, etc.
- Chaining expressions with
;or, - The increment and decrement operators
++and-- - Some of the ES2015+ operators
Expression context
The expression context is typically the component instance. For example, in the following snippets, the recommended and itemImageUrl refer to properties of the AppComponent.
<h3>{{ recommended }}</h3>
<img [src]="tiemImageUrl">An expression may also refer to properties of the template’s context such as a template input variable, e.g let customer, or a template reference variable, e.g. customerInput.
<ul>
<li *ngFor="let customer of customers">{{customer.name}}</li>
</ul>
<label>Type something:
<input #customerInput>{{customerInput.value}}
</label>Note:
- The component has a
customerproperty, and *ngFordefines acustomertemplate variable.refers to the template input variable, not the component’s property.
No visible side effects
A template expression should not change any application state other than the value of the target property.
This rule is essential to Angular’s “unidirectional data flow” policy. You should never worry that reading a component value might change some other displayed value. The view should be stable throughout a single rendering pass.
There is one exception to this behavior that applies to *ngFor. *ngFor has trackBy functionality that can deal with referential inequality of objects that when iterating over them.
Quick execution
Angular executes template expressions after every change detection cycle. Change detection cycles are triggered by many asynchronous activities such as promise resolutions, HTTP results, timer events, key presses and mouse moves.
Expressions should finish quickly or the user experience may drag, especially on slower devices. Consider caching values when their computation is expensive.
Simpicity
Although it’s possible to write complex template expressions, it’s better practive to avoid them.
4. Template Statements
A template statement responds to an event raised by a binding target such as an element, component, or derictive. The template statements appearing in quotes to the right of the = symbol as in (event)="statement". E.g.
<button (click)="deleteHero()">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 user action.
Statement context
As with expression, statements can refer only to what’s in the statement context such as an event handling method of the component instantce.
The statement context is typically the component instance. E.g. the deleteHero in (click)="deleteHero()" is a method of the data-bound component.
The statement context may also refer to properties of the template’s own context, e.g. the template $event object, a template input variable, e.g. (let hero), a template reference variable, e.g. heroRorm are passed to an event handling method of the component.
<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)">...</form>
