Getting Started
    Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Troubleshooting
New to Kendo UI for Angular? Start a free 30-day trial

Debouncing Value Changes

By default, the Kendo UI for Angular Inputs process each update of an input value without delay.

However, changes in the input might trigger complex operations such as network requests. To handle such scenarios, implement a slight delay before the component accepts the new value.

The following example demonstrates how to apply an afterValueChanged directive to any component with a valueChange event. Under the hood, the implementation uses the debounceTime RxJS operator.

Example
View Source
Change Theme:

In this article

Not finding the help you need?