diff --git a/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts b/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts index cba4de07ac4..3d3b464a846 100644 --- a/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts +++ b/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts @@ -6,8 +6,6 @@ import { Component, OnDestroy } from '@angular/core'; template: '

{{message}}

' }) 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); } } diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts index 21e40518e7e..b8396f5ffe2 100644 --- a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts +++ b/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 diff --git a/aio/content/examples/observables/src/multicasting.ts b/aio/content/examples/observables/src/multicasting.ts index 59f4b856d9a..7fea101c81d 100644 --- a/aio/content/examples/observables/src/multicasting.ts +++ b/aio/content/examples/observables/src/multicasting.ts @@ -6,12 +6,12 @@ export function docRegionDelaySequence(console: Console) { // #docregion delay_sequence function sequenceSubscriber(observer: Observer) { 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[] = []; - // 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, 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); } }; } diff --git a/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts index 037ff2c8b59..101652bb91c 100644 --- a/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts +++ b/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 diff --git a/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts index 25bd6c395a1..4feaa972692 100644 --- a/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts +++ b/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