Angular — Notifying the Component of User Changes

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…