Delay & DelayWhen in Angular

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.

Delay

Delays the emission of items from the source Observable by a given timeout or until a given Date.

Syntax

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.

Delay Example

In the following example, we add a delay of 1000ms. After 1000ms all the values appear instantly.

Source Code

Delay Each item

The following code uses concatMap with delay operator to add delay between each emission.

Source Code

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.

Source Code

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.

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

Source Code

References

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top