@angular/core

@let allows you to define a local variable and re-use it across the template.

Syntax

          
@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
          
@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

Jump to details