Delay & DelayWhen Operators in Angular delays the emission of values from the source observable. The Delay operator delays by a given timeout or until a given Date. The DelayWhen delays until it receives a notification from another observable.
Table of Contents
Delay
Delays the emission of items from the source Observable by a given timeout or until a given Date.
Syntax
1 2 3 | delay<T>(delay: number | Date, scheduler: SchedulerLike = async): MonoTypeOperatorFunction<T> |
Wheredelay is the delay in milliseconds or a Date until which the emission of the source items are delayed
Note that delay delays the entire observable and not the individual items.
Delay Example
In the following example, we add a delay of 1000ms. After 1000ms all the values appear instantly.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | import { Component, VERSION } from "@angular/core"; import { of } from "rxjs"; import { delay, map, tap } from "rxjs/operators"; @Component({ selector: "my-app", template: ` <h1>Delay & DelayWhen Example</h1> `, styleUrls: ["./app.component.css"] }) export class AppComponent { ngOnInit() { of(1, 2, 3, 4, 5) .pipe( tap(val => console.log("Before " + val)), delay(1000) ) .subscribe( val => console.log(val), e => console.log(e), () => console.log("Complete") ); } } Before 1 Before 2 Before 3 Before 4 Before 5 1 //Appears after a delay of 1000ms 2 3 4 5 Complete |
Delay Each item
The following code uses concatMap with delay operator to add delay between each emission.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | of(1, 2, 3, 4, 5) .pipe( tap(val => console.log("Before " + val)), concatMap(item => of(item).pipe(delay(1000))) ) .subscribe( val => console.log(val), e => console.log(e), () => console.log("Complete") ); *** Console **** Before 1 Before 2 Before 3 Before 4 Before 5 1 2 3 4 5 Complete |
Passing Date to Delay Operator
Instead of delay in milliseconds, we can also pass the date. Operator time shifts the start of the Observable execution until the given date occurs.
In the following example, we add a 5 second to the current date and pass it to the delay operator.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import { Component, VERSION } from "@angular/core"; import { of } from "rxjs"; import { delay, tap } from "rxjs/operators"; @Component({ selector: "my-app", template: ` <h1>Delay & DelayWhen Example</h1> `, styleUrls: ["./app.component.css"] }) export class AppComponent { dt = new Date(); ngOnInit() { console.log(this.dt); this.dt.setSeconds(this.dt.getSeconds() + 5); console.log(this.dt); of(1, 2, 3, 4, 5) .pipe( tap(val => console.log("Tap " + val)), delay(this.dt) ) .subscribe( val => console.log(val), e => console.log(e), () => console.log("Complete") ); } } |
DelayWhen
Delays the emission of items from the source observable by a given time span determined by the emissions of another observable.
DelayWhen Example
The DelayWhen triggers when the timer observable emits an value after 1000 ms.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | of(1, 2, 3, 4, 5) .pipe( tap(val => console.log("Before " + val)), delayWhen(() => timer(1000)) ) .subscribe( val => console.log(val), e => console.log(e), () => console.log("Complete") ); *** Console **** Before 1 Before 2 Before 3 Before 4 Before 5 1 2 3 4 5 Complete |
In the following example, we create notification observable using Subject and use it in the DelayWhen Operator. We emit the notification when the users click on a button. The DelayWhen waits until the notification before emitting the values
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import { Component, VERSION } from "@angular/core"; import { interval, of, Subject, timer } from "rxjs"; import { concatMap, delay, delayWhen, map, tap } from "rxjs/operators"; @Component({ selector: "my-app", template: ` <h1>Delay & DelayWhen Example</h1> <button (click)="emit()">Emit</button> `, styleUrls: ["./app.component.css"] }) export class AppComponent { click$ = new Subject<Event>(); ngOnInit() { of(1, 2, 3, 4, 5) .pipe( tap(val => console.log("Before " + val)), delayWhen(() => this.click$.asObservable()) ) .subscribe( val => console.log(val), e => console.log(e), () => console.log("Complete") ); } emit() { this.click$.next(); } } |
