Angular 6 Features

As we know Angular 6 has been released. The angular team has come up with a lot of features. Of course I will not be able to go over them in this one post. I will go over the features that I have read up and am reading.

Angular 6 modules are generally focused on

1. Reducing compilation time (Bazel Compiler):

During development, for any change, the compiler rebuilds the complete code which obviously takes a lot of time. Bazel will only compile what is necessary hence reducing compile time

2. Reducing the code size (Ivy):

Ivy will not be default, if you want to use this you will need to manually change a compiler option. If used this will improve speed, reduce size and give an increase in flexibility.

3. Service workers:

Service workers were released with Angular 5 but they were not stable. The angular team came with the stable version and with an additional feature. Service worker helps us to caching the application in the browser which can run in offline mode.

4. Component Dev Kit(CDK) :

This package is already used by the Angular Material library, which offers 30+ UI components. What if we don’t want to use Angular Material but want to build your own library of UI components and control page layouts? CDK gives us the authority to do this.

Features included in Angular 6 :

Typescript 2.7

Changes in Router Module :

Currently, NavigationStart there is no way to know if navigation was triggered imperatively or via the location change.We just need to add navigation source and restoresState to navigationStart event then we would able to know navigation was triggered imperatively or via the location change.

Changes in Form Module :

ngModelChange is now emitted after the value gets updated. Initially, you could get the result by passing the $event parameter on OnChange Event.

Example :

<input [(ngModel)]="Angular" (ngModelChange)="onChangeEmit($event)">
onChangeEmit(event) {
  console.log(event);           
}

It will log the updated value.

But if you don’t pass the $event parameter in OnChangeHandler event then you will get old value on onChange and not updated value.

Example :

<input [(ngModel)]="Angular" (ngModelChange)="onChangeEmit">
onChangeEmit(ngModel : NgModel){
console.log(ngModel.value)
}

It will log the old value.

In Angular 6 you can get the updated value without passing any parameter.

Example :

<input [(ngModel)]="Angular" (ngModelChange)="onChangeEmit">
onChangeEmit(ngModel : NgModel){
console.log(ngModel.value)   
}

It will log updated value.