Angular 6

As we know Angular 6 beta version has been released. The angular team comes up with a lot of features.


In Angular 6 modules, they generally focused on

  1.  How to reduce the compilation time
  2.  How to reduce the code size
  3.  Service workers
  4.  CDK


Bazel Compiler: Whenever we do the development small changes comes every time and every time it was rebuilding the complete code for every change which obviously takes a lot of time.

Here Bazel helps, it rebuild the code wherever the changes has been done.

It also helps in caching and parallel execution of the application.


Ivy Renderer or Compiler: Ivy Renderer is generally focused on speed improvements of application, reduce code size, better compilation time. The code debugs will be easier.


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.


Service Workers: As it has been released with Angular 5 but it was not stable. The angular team came with the stable version and with an additional feature. Service worker helps us to cache the application in the browser which can run in offline mode.


Features which has been included in Angular 6 :


Typescript 2.7

Changes in the 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 restores the state to navigation Start 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) {




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 not updated value.

Example : 


<input [(ngModel)]="Angular" (ngModelChange)="onChangeEmit">

onChangeEmit(ngModel : NgModel){




It will log the old value.

But in Angular 6 you don’t need worry as you can achieve the update value without passing any parameter.

Example :


<input [(ngModel)]="Angular" (ngModelChange)="onChangeEmit">

onChangeEmit(ngModel : NgModel){



It will log updated value.

Also, Read:

Browser push notifications using javascript

Computer Vision and Cafeteria Management System

  1. Thanks for sharing this kind of informative blog post. Purchase Commerce offers you the best online shopping cart software for the eCommerce website. We have developed NodeJS, AngularJS online shopping cart system for a store business. You can try our live demo.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.