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)
- valueChanges observable
We’ll cover the first two in today’s post.
I’ve setup some initial component and HTML for example
The generated view is as follows
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.
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)