Let
IMPORT MODULE

Allows to reuse computed value in several places in template to avoid recalculations of getters or many async pipes.

<div *let="value1 as v">
  <p>{{ v }}</p>
</div>
<div *let="time$ | async as time">
  <p>{{ time }}</p>
</div>

Examples

v1 (use *let directive) called count: 0; v2 called count: 0;

v1

v1

v2

v2

Basic Usage

Simplest of usage.

expand codeexpand code
import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'components-let-simple',
  template: `
    <p>v1 (use *let directive) called count: {{ v1Count }}; v2 called count: {{ v2Count }};</p>
    <div *let="value1 as v">
      <p>{{ v }}</p>
      <p>{{ v }}</p>
    </div>
    <p>{{ value2 }}</p>
    <p>{{ value2 }}</p>
    <button nz-button (click)="update()">Random Value</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ComponentsLetSimpleComponent {
  v1Count = 0;
  v2Count = 0;
  v1 = 'v1';
  v2 = 'v2';

  get value1(): string {
    ++this.v1Count;
    return this.v1;
  }

  get value2(): string {
    ++this.v2Count;
    return this.v2;
  }

  update(): void {
    this.v1 = `v1-${Math.random()}`;
    this.v2 = `v2-${Math.random()}`;
  }
}
async

One subscription and multiple use.

expand codeexpand code
import { Platform } from '@angular/cdk/platform';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { interval, startWith } from 'rxjs';

import { NzSafeAny } from 'ng-zorro-antd/core/types';

@Component({
  selector: 'components-let-async',
  template: `
    <ng-container *ngIf="timer$ !== null">
      <ng-container *let="timer$ | async as time">
        <p>Timer value: {{ time }}</p>
        <p>Timer value: {{ time }}</p>
        <p>Timer value: {{ time }}</p>
      </ng-container>
    </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComponentsLetAsyncComponent {
  timer$: NzSafeAny | null = null;

  constructor(platform: Platform) {
    if (!platform.isBrowser) return;

    this.timer$ = interval(1000).pipe(startWith(0));
  }
}

API

let

PropertyDescriptionTypeDefaultGlobal Config
[let]ExpressionT--