Now Available III: Angular 6 w/ CLI 1.7

Overview

Angular (v6) has been released and there have been some significant updates that will make your apps a lot faster. Overall, the footprint has been reduced significantly and the number of solutions that come out of the box will simply create an even better development opportunity. If you would like to know more about these new features, you can check out them here:

Now Available: Angular 6 w/ CLI1.7

Now Available II: Angular 6 w/CLI 1.7

For this article, we'll take a closer look at some of the updates that have been introduced into the framework with regards to the ngModelChange. Every component in Angular has a life cycle. These range from initializing the component, detecting changes and managing changes to rendering content, displaying that content and destroying the component or directive. The Angular framework exposes various hooks within the life cycle that allow you to develop and control components behavior at every exposed hook.

Here are some of those Angular Event Hooks:

ngModelChange and the ngOnChange event

Previously, if an assignment to the model had taken place, the change was emitted before the control had been updated. This would cause issues if that control depended on receiving the new value. The reason for this is that since the event had occurred before the control data-binding received the new value, it would still reference the old one.

//model directive that depends on receiving a new value when the model changes.
<input #modelDir="ngModel" 
       [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">


//Control
onChange(ngModel: NgModel) {
      console.log(ngModel.value); // would log old value, not updated value
}

In Angular (v6), the behavior has changed so that the underlying control receives the new value and after validity and assignments have occurred. This implies that when the ngModelChange event is emitted, the values have already been applied to the directive/component and its underlying control. This simply means that values will reflect the updated state of the control, rather than the older values.

//model directive that depends on receiving a new value when the model changes.
<input #modelDir="ngModel" 
       [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">


//Control
onChange(ngModel: NgModel) {
      console.log(ngModel.value); // logs updated value
}

For a complete reference, see PR from Github.

The goal of this change is to make the component and the underlying controls less confusing and more straightforward to use.

This could affect any applications that currently leverage assumption that event receives the old value so it should be something to keep in mind when migrating from v5 to v6 as this change was introduced. The good news is that when the onChange event receives values, it will be what you originally thought it should've been!

In the next article, we'll take a close look at the new capabilities with form validators of Angular (v6) next week. Are you using Angular and what has been your experience with it? Let me know and leave a comment.

Thanks for reading! If you'd like to see more about Angular or all things otherwise, you can check out uxdsummit.com for our upcoming workshops and agenda for 2019. Until next time!