mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
48 lines
No EOL
1.4 KiB
Markdown
48 lines
No EOL
1.4 KiB
Markdown
@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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/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 dedicated guide](guide/templates/let-template-variables) |