Delay & DelayWhen In Angular

The Code Points June 29, 2022 0

In this article, we will learn what is Delay & DelayWhen in Angular and how to use it. Delay & DelayWhen using Angular operators, the emission of values from the source observable is delayed. The Delay operator causes a delay for a specified timeout or until a specified Date. The DelayWhen waits until another observable sends it a notification.

Delay

Delays the emission of items from the Observable source for a specified timeout or until a specified Date.

Syntax

delay<T>(delay: number | Date, scheduler: SchedulerLike = async): MonoTypeOperatorFunction<T>

Where

The delay in milliseconds or the date till which the source items' emission is delayed

It's worth noting that delay affects the entire observable rather than just individual elements.

Delay Example

We add a 1000ms delay in the following example. After 1000 milliseconds, all of the values shown at the same time.

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

To add a delay between each emission, the following code uses concatMap with the delay operator.

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

We can also pass the date instead of delay in milliseconds. The operator delays the start of the Observable execution till the specified date.

We add 5 seconds to the current date and pass it to the delay operator in the following example.

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 for a set amount of time specified by the emissions of another observable.

DelayWhen Example

When the timer observable emits a value after 1000 milliseconds, the DelayWhen triggers.

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

We generate a notification observable with Subject and use it in the DelayWhen Operator in the following example. When users click on a button, we send out a notification. Before emitting the values, the DelayWhen waits for the notice.

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();
  }
 
}

Conclusion

In this article, we learned what is Delay & DelayWhen in angular and how to use it in angular.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.