Angular — Notifying the Component of User Changes

Jawadhasan
4 min readOct 6, 2023
Photo by Milad Fakurian on Unsplash

Introduction

In earlier post, we saw how to communicate in and out of components using input/output properties.

Another approach we learned was use of template reference variable and @ViewChild decorator to access elements/components on template and call methods on it. You can check this article for details.

Today, we’ll learn how to notify the component of user changes. We can use following for this purpose:

  • Two-way bindings (long-form)
  • Getter/Setter
  • valueChanges observable

We’ll cover the first two in today’s post.

Initial Setup

I’ve setup some initial component and HTML for example

The generated view is as follows

Search Input

For filter input following input element is bind to listFilter property using short style for binding.

This will render an Input box for search entry and entry will be displayed inside a <p> tag.

Two-Binding (Long-form)

Following is the markup for typical two-way binding (short style) with input where user can enter some filter criteria.

Two-way Data Binding (short-form)

so, the listFilter property will be updated with the user input, but how to actually perform filtering operation?

To notify the component and perform some additional operation beside simple data-binding (i.e. actually perform filter) We can use long-form.

Two-way Data Binding (long-form)

--

--

Jawadhasan

Software Solutions Team Lead | Cloud Architect | Solutions Architect