Angular 2 introduces
ng-model from Angular 1 in a completely different manner. Due to this, I wanted to make a quick post on how to use Angular 2’s
ng-model to build components that alert its parents app/component of changes.
I’m going to use the Ionic 2 conference app as an example.
In this post, we’ll look at the schedule page in the app and see how it uses the
ion-search-bar to update its
searchQuery to filter out sessions from the schedule when the user changes the search input.
The set up
On the schedule component, we set up the search query as a simple string, as such:
this.searchQuery = '';.
Then in our schedule page template, we tell the
ion-search-bar to use the
ng-model directive and tell it to two-way bind using the schedule component’s
The template is like this:
Now, in the search bar, we need to take that
searchQuery as an ngModel, and ensure the search-bar has a value accessor implemented, so that we may tell the schedule component of when things change to update its shadow DOM if need be.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
1 2 3 4 5
ControlValueAccessor gives us a method to write the new value, a method to register to listen to the changes, and the register on touched function to allow components to use.
Those are implemented in the search-bar, as seen here.
You can see that the
writeValue method on
search-bar updates it’s local
value, so that it’s internal
<input> element can update its value it shows. When that internal input is changed, it calls the inputChanged event on the
search-bar, which alerts other components that it has changed, as well as updating its current value.
1 2 3 4
Filtering out sessions
onChange event is called, the
schedule component will see this and cause re-evaluation on its
searchQuery variable, and filters the code.
That makes our filtering method super easy, as seen here, copied below for convenience:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
When the schedule component’s variable for
searchQuery is updated, this method will be auto-magically re-evaluated, which causes the list to update.
Hope this helps you understand Angular 2 and ng-models better! Enjoy!