NG-ALAIN- CURD
stTable svView seEdit sfDynamic Form LIB
- Basic
avatar-listAvatarList count-downCount down down-fileDownload file letLet mediaHTML5 Media reuse-tabReuse Route Tab loadingLoading indicator pdfPdf qrQR lodopLodop Print xlsxExcel Observers onboardingOnboarding zipZip ChartG2 LIB Theme System LIB Utils LIB
- Form
error-collectError Collect range-pickerData Range
- Layout
ellipsisEllipsis exceptionException footer-toolbarFooterToolbar full-contentFull Screen Workspace global-footerGlobal footer page-headerPage Header resultResult sgSimple Grid tag-selectTag Select
- Business
notice-iconNotification menu quick-menuQuick Menu Authentication LIB Access Control List LIB Cache LIB Mock LIB
- Other
auto-focusAuto focus highlightHighlight
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
Simplest of usage.
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()}`;
}
}One subscription and multiple use.
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));
}
}