diff --git a/projects/demo/src/modules/components/accordion/accordion.component.ts b/projects/demo/src/modules/components/accordion/accordion.component.ts index 21530ccdc26c..474b41faafc0 100644 --- a/projects/demo/src/modules/components/accordion/accordion.component.ts +++ b/projects/demo/src/modules/components/accordion/accordion.component.ts @@ -1,12 +1,15 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; +import {Component, ElementRef, Inject, Self, ViewChild} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; +import {TuiDestroyService} from '@taiga-ui/cdk'; import {TUI_EXPAND_LOADED, TuiSizeS} from '@taiga-ui/core'; +import {Observable, takeUntil, timer} from 'rxjs'; @Component({ selector: 'example-accordion', templateUrl: './accordion.template.html', changeDetection, + providers: [TuiDestroyService], }) export class ExampleTuiAccordionComponent { @ViewChild('content') @@ -61,6 +64,10 @@ export class ExampleTuiAccordionComponent { size: TuiSizeS = this.sizeVariants[1]; + constructor( + @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable, + ) {} + onOpenChange(open: boolean): void { this.open = open; @@ -68,12 +75,12 @@ export class ExampleTuiAccordionComponent { return; } - setTimeout(() => { - const event = new CustomEvent(TUI_EXPAND_LOADED, {bubbles: true}); - - if (this.content) { - this.content.nativeElement.dispatchEvent(event); - } - }, 3000); + timer(3000) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => + this.content?.nativeElement.dispatchEvent( + new CustomEvent(TUI_EXPAND_LOADED, {bubbles: true}), + ), + ); } } diff --git a/projects/demo/src/modules/components/expand/expand.component.ts b/projects/demo/src/modules/components/expand/expand.component.ts index e1ac53037476..3e2963b12297 100644 --- a/projects/demo/src/modules/components/expand/expand.component.ts +++ b/projects/demo/src/modules/components/expand/expand.component.ts @@ -1,13 +1,23 @@ -import {ChangeDetectorRef, Component, ElementRef, Inject, ViewChild} from '@angular/core'; +import { + ChangeDetectorRef, + Component, + ElementRef, + Inject, + Self, + ViewChild, +} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; +import {TuiDestroyService} from '@taiga-ui/cdk'; import {TUI_EXPAND_LOADED, TuiExpandComponent} from '@taiga-ui/core'; +import {Observable, takeUntil, timer} from 'rxjs'; @Component({ selector: 'example-expand', templateUrl: './expand.template.html', styleUrls: ['./expand.style.less'], changeDetection, + providers: [TuiDestroyService], }) export class ExampleTuiExpandComponent { @ViewChild(TuiExpandComponent, {read: ElementRef}) @@ -27,7 +37,10 @@ export class ExampleTuiExpandComponent { delayed = false; - constructor(@Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef) {} + constructor( + @Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef, + @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable, + ) {} onExpandedChange(expanded: boolean): void { this.expanded = expanded; @@ -37,15 +50,14 @@ export class ExampleTuiExpandComponent { return; } - setTimeout(() => { - const event = new CustomEvent(TUI_EXPAND_LOADED, {bubbles: true}); + timer(5000) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + const event = new CustomEvent(TUI_EXPAND_LOADED, {bubbles: true}); - this.delayed = false; - this.cdr.detectChanges(); - - if (this.expand) { - this.expand.nativeElement.dispatchEvent(event); - } - }, 5000); + this.delayed = false; + this.cdr.detectChanges(); + this.expand?.nativeElement.dispatchEvent(event); + }); } } diff --git a/projects/demo/src/modules/directives/for/examples/1/index.ts b/projects/demo/src/modules/directives/for/examples/1/index.ts index 17f99170c16d..70ff6d0dc473 100644 --- a/projects/demo/src/modules/directives/for/examples/1/index.ts +++ b/projects/demo/src/modules/directives/for/examples/1/index.ts @@ -1,28 +1,36 @@ -import {Component} from '@angular/core'; +import {Component, Inject, Self} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {BehaviorSubject} from 'rxjs'; +import {TuiDestroyService} from '@taiga-ui/cdk'; +import {BehaviorSubject, Observable, takeUntil, timer} from 'rxjs'; @Component({ selector: 'tui-for-example-1', templateUrl: './index.html', encapsulation, changeDetection, + providers: [TuiDestroyService], }) export class TuiForExample1 { readonly items$ = new BehaviorSubject([]); + constructor( + @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable, + ) {} + refresh(): void { this.items$.next(null); const delay = Math.round(Math.random() * 2000); - setTimeout(() => { - this.items$.next( - delay % 2 - ? [] - : ['William "Bill" S. Preston Esq.', 'Ted "Theodore" Logan'], + timer(delay) + .pipe(takeUntil(this.destroy$)) + .subscribe(() => + this.items$.next( + delay % 2 + ? [] + : ['William "Bill" S. Preston Esq.', 'Ted "Theodore" Logan'], + ), ); - }, delay); } }