IsPresent CDK

    
    

        
            Copy
        
        
    

    
<ng-container *tuiLet="count$ | async as count">
    <div *ngIf="count | tuiIsPresent; else loading">
        count is
        <code>{{ count | json }}</code>
    </div>
 
    <ng-template #loading>
        <div>
            count is
            <code>{{ count | json }}</code>
            while it's loading
        </div>
    </ng-template>
</ng-container>
 
<button
    size="m"
    tuiButton
    type="button"
    class="tui-space_top-4"
    (click)="loadCount()"
>
    Load count
</button>
    

        
            Copy
        
        
    

    
import {CommonModule} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiIsPresentPipe, TuiLet} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {delayWhen, of, Subject} from 'rxjs';
 
@Component({
    standalone: true,
    exportAs: "Example1",
    imports: [CommonModule, TuiButton, TuiIsPresentPipe, TuiLet],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Example {
    private readonly loadCountSubject = new Subject<void>();
 
    protected readonly count$ = of(0).pipe(delayWhen(() => this.loadCountSubject));
 
    protected loadCount(): void {
        this.loadCountSubject.next();
        this.loadCountSubject.complete();
    }
}
    

        
            Copy