Appearance
@developerPreview
@let
allows you to define a local variable and re-use it across the template.
Syntax
angular-html
@let name = user.name;
@let data = data$ | async;
Description
@let
declarations are similar to JavaScript's let
and their values can be any valid Angular expression. The expressions will be re-evaluated everytime the template is executed.
Similarly to javascript variables, variables declared @let
, can be used:
- After they have been declared
- Within the bound of the same scope and nested scopes
angular-html
@let user = user$ | async;
@if (user) {
<h1>Hello, {{user.name}}</h1>
<user-avatar [photo]="user.photo"/>
<ul>
@for (snack of user.favoriteSnacks; track snack.id) {
<li>{{snack.name}}</li>
}
</ul>
<button (click)="update(user)">Update profile</button>
}
Syntax definition
The @let
syntax is formally defined as:
- The
@let
keyword. - Followed by one or more whitespaces, not including new lines.
- Followed by a valid JavaScript name and zero or more whitespaces.
- Followed by the = symbol and zero or more whitespaces.
- Followed by an Angular expression which can be multi-line.
- Terminated by the
;
symbol.
HELPFUL: A comprehensive description of the feature is availble on the templates guide