Angular Component Communication

Good communication is the bridge between confusion and clarity.

This article will focus on the communication between template (html) and component (typescript file). In Angular, component needs to communicate with its template. Every component has a template and to display data or interact with user, the component needs to communicate with template.

Below are few scenarios.

1. Component has to tell template that data is changed.
2. React to user changes. If user change value of filter criteria textbox then component must know so that it can filter data based on updated value.
3. Component may ask template to set focus on specific field.

Let us discuss about techniques that are used to communicate between component and template.

Communication between template and component

There are few interesting points in above figure.

Point # 1 [(ngModel)]

We know that it is two way binding syntax. It is a combination of property binding and event binding. The long form of two-way binding is

Two way binding long form

1st part is one-way binding (from component to view). it ensures that default value defined in component is displayed in template (UI). 2nd part helps us to catch updated value (by user) through event binding. But it does not raise any event in component to catch updated value. What is the solution to get updated value in component whenever user change it?

Property and Event Binding

There is another way to achieve this by getters and setters of property. We get notification in component whenever there is a change in listFilter value. In setters, we can place logic as well like formatting data or in our case we are calling performFilter to filter grid based on changed value. It is great design pattern and it looks very clean approach.

Two-way binding with getters and setters

We will continue with same subject (Angular component communication) in next blog.