Steps to implement Agular Signals
Follow below steps to implement the debounce operator with effect():
Step 1: Create a new Angular application using the Angular CLI:
ng new my-app
Folder Structure
Dependencies:
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/platform-server": "^17.3.0",
"@angular/router": "^17.3.0",
"@angular/ssr": "^17.3.3",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
Step 2: Go to the project folder
cd my-app
Step 3: Add the following codes in respective files
<!--app.component.html-->
<div>
<h1>{{ title }}</h1>
<input type="text" [formControl]="searchInput" [value]="searchInputSignal()">
</div>
//app.component.ts
import { JsonPipe, NgIf } from '@angular/common';
import { Component, effect, signal } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, ReactiveFormsModule, FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title: string = 'debounce-example';
searchInput = new FormControl('');
searchInputSignal = signal(this.searchInput.value);
constructor() {
effect(() => {
this.searchInput.valueChanges
.pipe(debounceTime(500), distinctUntilChanged())
.subscribe((res) => {
this.searchInputSignal.set(res);
console.log('Performing search for:', res);
});
});
}
}
In this example,
- We create a FormControl instance called searchInput.
- We create a new signal called searchInputSignal and initialize it with the initial value of the FormControl instance (this.searchInput.value).
- Inside the effect function, we subscribe to the valueChanges observable from the searchInput FormControl instance.
- We use the pipe function from RxJS to apply the debounceTime and distinctUntilChanged operators to the valueChanges observable.
- When a new value is emitted after the debounce time and being distinct from the previous value, the subscribe callback function is executed.
- Inside the subscribe callback, we update the searchInputSignal with the new value using this.searchInputSignal.set(res).
- We also log the new value to the console.
Output:
Angular Signals – debounce in effect()
In Angular, the effect() function creates side effects based on reactive signal values. The debounce operator is a powerful tool that can be used with effect() to control the rate at which the side effect is triggered. Debouncing is a technique that delays the execution of a function until a certain amount of time has passed since the last time it was invoked. This can be particularly useful in scenarios where you want to prevent excessive function calls, such as user input events or network requests.
Contact Us