Introduction:

Angular is a frame work to develop responsive and dynamic web applications. It has an advanced feature known as Observables which works based on Reactive Programming and used extensively in Angular applications. Observables are asynchronous in nature and you may not get the expected output if you don’t handle the delay.

Two important operators that are used to handle the delay in Angular are Delay and DelayWhen. This article discusses these operators with practical examples.

Part 1: What is Delay?

Delay operator is commonly used in Angular applications when we want to delay the execution of an Observable for a fixed amount of time. It is a non-blocking operator that has the ability to delay the execution of the subsequent Observable until the specified time is up. The syntax to apply Delay operator is as follows:

“`
selected_obs.pipe(delay(milliseconds));
“`

Here, selected_obs is the original Observable that we want to delay and the milliseconds is the time delay that we want to set. For example, if we want to delay the emission of the data for 5 seconds, we can use the following syntax:

“`
import { of } from ‘rxjs’;
import { delay } from ‘rxjs/operators’;

const obs = of(1, 2, 3);
const delayedObs = obs.pipe(delay(5000));
delayedObs.subscribe(val => console.log(val));
“`

In this example, we created an Observable using “of” operator for the numbers 1, 2 and 3. We then applied the Delay operator with 5 seconds as a parameter, and finally subscribed to it. When we run this code, the output will be:

“`
1
2
3
“`

But there will be a delay of 5 seconds before the console logs the output.

Part 2: What is DelayWhen?

DelayWhen operator is also used in Angular applications to delay the execution of an Observable. While Delay operator has a fixed time delay, DelayWhen operator has a dynamic delay time based on the result of another Observable. The syntax to apply DelayWhen operator is as follows:

“`
selected_obs.pipe(delayWhen(() => new Observable(() => milliseconds$)));
“`

Here, selected_obs is the original Observable that we want to delay, the anonymous function “() => new Observable()” returns another Observable and milliseconds$ is an Observable that we are using to set the delay time.

Let’s consider the following example:

“`
import { interval, of } from ‘rxjs’;
import { delayWhen } from ‘rxjs/operators’;

const obs1 = of(1, 2, 3);
const obs2 = interval(1000);
const delayedObs = obs1.pipe(delayWhen(() => obs2));
delayedObs.subscribe(val => console.log(val));
“`

In this example, we created two Observables obs1 and obs2 with the data 1, 2, 3 and 0, 1, 2, 3, …. respectively. We then applied the DelayWhen operator on obs1 with the second Observable obs2 and subscribed to it. As we know, obs2 is an Observable that emits data every second.

So when we run this code, the output will be:

“`
1
“`

There will be a delay of 1 second before the console logs the output. Because the first emission of obs2 takes 1 second, the delay for obs1 is set accordingly for the first time only.

Part 3: FAQs

Q.1. What is the difference between Delay and DelayWhen operators in Angular?

Ans: The Delay operator has a fixed time delay while DelayWhen operator has a dynamic delay time based on the result of another Observable.

Q.2. Can we use DelayWhen with an event?

Ans: Yes, we can use DelayWhen with an event like button clicks, HTTP requests, etc.

Q.3. Can we use Delay and DelayWhen together in Angular?

Ans: Yes, we can use Delat and DelayWhen together in Angular as per our requirement.

Conclusion:

In this article, we learned how to handle the delay in Angular with Delay and DelayWhen operators. These operators are very helpful in managing the time delay in an asynchronous environment. I hope this article will help you in your next Angular project.

Similar Posts