@let

@let позволяет определить локальную переменную и повторно использовать её в шаблоне.

Синтаксис

@let name = user.name;
@let data = data$ | async;

Описание

Объявления @let похожи на оператор let в JavaScript, а их значения могут быть любым допустимым выражением Angular. Выражения будут вычисляться заново при каждом выполнении шаблона.

Как и переменные JavaScript, переменные, объявленные с помощью @let, можно использовать:

• После объявления
• В пределах той же области видимости и во вложенных областях видимости

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

Определение синтаксиса

Синтаксис @let формально определяется следующим образом:

• Ключевое слово @let.
• За ним следует один или несколько пробельных символов, не включая символы новой строки.
• За ними следует допустимое имя JavaScript и ноль или более пробельных символов.
• За ними следует символ = и ноль или более пробельных символов.
• За ними следует выражение Angular, которое может занимать несколько строк.
• Завершается символом ;.