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.
Delays the emission of items from the source Observable by a given timeout or until a given Date.
Syntax
delay<T>(delay: number | Date, scheduler: SchedulerLike = async): MonoTypeOperatorFunction<T>
Where
delay 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.
In the following example, we add a delay of 1000ms. After 1000ms all the values appear instantly.
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
The following code uses concatMap with delay operator to add delay between each emission.
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
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.
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")
);
}
}
Delays the emission of items from the source observable by a given time span determined by the emissions of another observable.
The DelayWhen triggers when the timer observable emits an value after 1000 ms.
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
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();
}
}
