Debouncing Your Angular Search Field

Photo by Aung Soe Min on Unsplash

Updated Version

Scenario

Approach

imports

import { Component, ElementRef, AfterViewInit, ViewChild } from '@angular/core';import {fromEvent } from 'rxjs';import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';

Declarations

@ViewChild('input') input: ElementRef;

Markup

<input placeholder="Search" #input>

Implementation

Demo

Bonus


pipe(
filter(Boolean),
debounceTime(150)
<input (keyup)="functionToCallOnKeyUp()">

Brought to You By

Founder of Firefly Semantics Corporation