How to Use RXJS Debounce Time With Angular
Tags: angular, rxjs, webdev, tutorial
Published: 2023-08-01 04:46:07

In this article, I will guide you through the concept of debounce time and how to use it in your Angular applications with **RxJS** operators. Debounce time helps efficiently manage user input and optimize application performance. I'll provide a step-by-step guide to help you understand how to use debounce time and improve your application's performance and usability. First, let's explore what debounce time is.

## What is Debounce Time?

Debounce time is a technique used to prevent an event from being triggered too frequently. This can be especially useful in situations where you want to avoid the user spamming a button or sending an excessive number of requests to a server. For instance, let's consider an input search field similar to Google's search bar. If a user starts typing in the field, we don't want to immediately send a request for each character they type. Instead, we can use debounce time to delay the request and ensure it is sent only after the user has paused typing for a certain duration. By applying debounce time, we can efficiently manage user input and prevent unnecessary API calls, which can lead to a better user experience and improved application performance. Now let's see how to use the debounce time for our Angular application.
## How to Use Debounce Time in Angular

Most Common approach is to apply debounce time by using the **rxjs** library. Which Angular already includes as a dependency.

And now Let's explore those operators and pipes.

**debounceTime() pipe**
The debounceTime pipe is a built-in Angular pipe that can be used to debounce an event. To use the debounceTime pipe, you need to pass the debounce time in milliseconds as an argument
**distinctUntilChanged()**
distinctUntilChanged is an operator that is used to filter out consecutive emissions of the same value from an Observable. This can be useful in situations where you want to prevent the Observable from emitting the same value multiple times in a row.
**takeUntil()**
The takeUntil() operator in Angular is used to automatically unsubscribe from an Observable when another Observable emits a value. This can be useful in situations where you want to prevent an Observable from emitting values after a certain point.

In this tutorial, I will show you how to use RxJS to apply debounce time to an input event. I will demonstrate way to implement debounce time in your application.


## Step 01: Create the template file

In your template content

```
<div class="content" role="main">
  <h1>Welcome</h1>
  <h2>How to Use Debounce Time to Improve the Performance of Your Angular Applications</h2>
  <input type="text" 
  [(ngModel)]="inputText" 
  placeholder="Input something" (input)="onSearch()" />
<br/>
</div>
```
Above, I have implemented an input field with an input event that triggers the debounce function.

## Step 02 : Import the required modules

Open the component file and import the necessary modules

```
import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
```
I import the required modules: **Subject** and the **debounceTime** operator from _rxjs/operators_.

## Step 03 : Implement the debounce logic

Create a private **searchSubject**,which will emit values whenever the **onSearch** method is called.

```
export class AppComponent {
  title = 'CodeSandbox';
  private searchSubject = new Subject<string>();
  inputText: string = '';
  ngOnInit() {
   
  }
  onSearch() {
    this.searchSubject.next(this.inputText);
  }

}

```
In the _ngOnInit_ lifecycle hook, I have established a subscription to the _searchSubject_. Within this subscription, I utilize the _debounceTime_ operator to introduce a delay before processing the emitted events. This delay allows the timer to reset if the user continues typing within the specified time (in this case, 300ms). However, if the user pauses typing for the specified time, the _searchSubject_ emits the latest value, triggering the execution of the _performSearch_ method with that value.

```
export class DebounceExampleComponent implements OnInit, OnDestroy {
  private searchSubject = new Subject<string>();
  private readonly debounceTimeMs = 300; // Set the debounce time (in milliseconds)

  ngOnInit() {
    this.searchSubject.pipe(debounceTime(this.debounceTimeMs)).subscribe((searchValue) => {
      this.performSearch(searchValue);
    });
  }

  ngOnDestroy() {
    this.searchSubject.complete();
  }

  onSearch(searchValue: string) {
    this.searchSubject.next(searchValue);
  }

  performSearch(searchValue: string) {
    // Perform the actual search operation here
    console.log('Performing search for:', searchValue);
    // ... Your search logic ...
  }
}
```
**Conclusion**
Debounce time is a powerful technique to control the frequency of event execution in Angular applications. By strategically delaying the processing of input events, you can optimize the performance and responsiveness of your application. Whether it's handling user inputs or other frequent events, debounce time is a valuable tool to have in your Angular development toolbox.

**That’s It!**

Of course you probably want to see this in action. Here’s a working demo for you to fork or play with:

{% codesandbox  modest-chaplygin-p87rrq%}


Thanks for reading the whole story ❤