chore(demo): cancel macrotask when element page destroyed

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,19 +64,23 @@ export class ExampleTuiAccordionComponent {
 
     size: TuiSizeS = this.sizeVariants[1];
 
+    constructor(
+        @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable<void>,
+    ) {}
+
     onOpenChange(open: boolean): void {
         this.open = open;
 
         if (!this.async || !open) {
             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}),
+                ),
+            );
     }
 }

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<void>,
+    ) {}
 
     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);
+            });
     }
 }

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<readonly string[] | null>([]);
 
+    constructor(
+        @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable<void>,
+    ) {}
+
     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);
     }
 }