docs: standardize examples using timers for SSR compatibility (#48480)

PR Close #48480

aio/content/examples/component-interaction/src/app/countdown-timer.component.ts

@@ -6,8 +6,6 @@ import { Component, OnDestroy } from '@angular/core';
   template: '<p>{{message}}</p>'
 })
 export class CountdownTimerComponent implements OnDestroy {
-
-  intervalId = 0;
   message = '';
   seconds = 11;
 
@@ -19,11 +17,11 @@ export class CountdownTimerComponent implements OnDestroy {
     this.message = `Holding at T-${this.seconds} seconds`;
   }
 
-  private clearTimer() { clearInterval(this.intervalId); }
+  private clearTimer() { }
 
   private countDown() {
     this.clearTimer();
-    this.intervalId = window.setInterval(() => {
+    const interval = setInterval(() => {
       this.seconds -= 1;
       if (this.seconds === 0) {
         this.message = 'Blast off!';
@@ -32,5 +30,6 @@ export class CountdownTimerComponent implements OnDestroy {
         this.message = `T-${this.seconds} seconds and counting`;
       }
     }, 1000);
+    this.clearTimer = () => clearInterval(interval);
   }
 }

aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts

@@ -23,7 +23,8 @@ export class AdBannerComponent implements OnInit, OnDestroy {
   currentAdIndex = -1;
 
   @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
-  interval: number|undefined;
+
+  private clearTimer() { }
 
   ngOnInit(): void {
     this.loadComponent();
@@ -31,7 +32,7 @@ export class AdBannerComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    clearInterval(this.interval);
+    this.clearTimer();
   }
 
   loadComponent() {
@@ -46,9 +47,10 @@ export class AdBannerComponent implements OnInit, OnDestroy {
   }
 
   getAds() {
-    this.interval = setInterval(() => {
+    const interval = setInterval(() => {
       this.loadComponent();
     }, 3000);
+    this.clearTimer = () => clearInterval(interval);
   }
 }
 // #enddocregion class

aio/content/examples/observables/src/multicasting.ts

@@ -6,12 +6,12 @@ export function docRegionDelaySequence(console: Console) {
   // #docregion delay_sequence
   function sequenceSubscriber(observer: Observer<number>) {
     const seq = [1, 2, 3];
-    let timeoutId: any;
+    let clearTimer = () => { };
 
     // Will run through an array of numbers, emitting one value
     // per second until it gets to the end of the array.
     function doInSequence(arr: number[], idx: number) {
-      timeoutId = setTimeout(() => {
+      const timeout = setTimeout(() => {
         observer.next(arr[idx]);
         if (idx === arr.length - 1) {
           observer.complete();
@@ -19,6 +19,7 @@ export function docRegionDelaySequence(console: Console) {
           doInSequence(arr, ++idx);
         }
       }, 1000);
+      clearTimer = () => clearTimeout(timeout);
     }
 
     doInSequence(seq, 0);
@@ -26,7 +27,7 @@ export function docRegionDelaySequence(console: Console) {
     // Unsubscribe should clear the timeout to stop execution
     return {
       unsubscribe() {
-        clearTimeout(timeoutId);
+        clearTimer();
       }
     };
   }
@@ -85,9 +86,9 @@ export function docRegionMulticastSequence(console: Console, runSequence: boolea
     const seq = [1, 2, 3];
     // Keep track of each observer (one for every active subscription)
     const observers: Observer<unknown>[] = [];
-    // Still a single timeoutId because there will only ever be one
+    // Still a single timer because there will only ever be one
     // set of values being generated, multicasted to each subscriber
-    let timeoutId: any;
+    let clearTimer = () => { };
 
     // Return the subscriber function (runs when subscribe()
     // function is invoked)
@@ -115,7 +116,7 @@ export function docRegionMulticastSequence(console: Console, runSequence: boolea
           observers.splice(observers.indexOf(observer), 1);
           // If there's no more listeners, do cleanup
           if (observers.length === 0) {
-            clearTimeout(timeoutId);
+            clearTimer();
           }
         }
       };
@@ -123,7 +124,7 @@ export function docRegionMulticastSequence(console: Console, runSequence: boolea
       // Run through an array of numbers, emitting one value
       // per second until it gets to the end of the array.
       function doSequence(sequenceObserver: Observer<number>, arr: number[], idx: number) {
-        timeoutId = setTimeout(() => {
+        const timeout = setTimeout(() => {
           console.log('Emitting ' + arr[idx]);
           sequenceObserver.next(arr[idx]);
           if (idx === arr.length - 1) {
@@ -132,6 +133,7 @@ export function docRegionMulticastSequence(console: Console, runSequence: boolea
             doSequence(sequenceObserver, arr, ++idx);
           }
         }, 1000);
+        clearTimer = () => clearTimeout(timeout);
       }
     };
   }

aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts

@@ -20,7 +20,7 @@ export class ToastComponent implements OnInit {
   // private methods
   private hide() {
     this.toastElement.style.opacity = 0;
-    window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
+    setTimeout(() => this.toastElement.style.zIndex = 0, 400);
   }
 
   activate(message = this.defaults.message, title = this.defaults.title) {
@@ -34,7 +34,7 @@ export class ToastComponent implements OnInit {
     this.toastElement.style.opacity = 1;
     this.toastElement.style.zIndex = 9999;
 
-    window.setTimeout(() => this.hide(), 2500);
+    setTimeout(() => this.hide(), 2500);
   }
 }
 // #enddocregion example

aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts

@@ -32,14 +32,14 @@ export class ToastComponent implements OnInit {
   // private methods
   private hide() {
     this.toastElement.style.opacity = 0;
-    window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
+    setTimeout(() => this.toastElement.style.zIndex = 0, 400);
   }
 
   private show() {
     console.log(this.message);
     this.toastElement.style.opacity = 1;
     this.toastElement.style.zIndex = 9999;
-    window.setTimeout(() => this.hide(), 2500);
+    setTimeout(() => this.hide(), 2500);
   }
 }
 // #enddocregion example