Techumber
Home Blog Work

Angular v6: What is Coming

Published on March 16, 2018

Angular 6 is on its way. After Angular 4 Angular 6 gonna be a Long-Term Supported (LTS) Version. The Angular 5.0 upgrade itself is all about making the framework faster, smaller and easier to use. Now, Angular 6.0 I’m very excited about it. As per angular’s RELEASE_SCHEDULE document, Angular 6.0 going to be released on April 4. At the time of writing this blog, Angular 6.0 is beta-7. If you want to try Angular 6 you can do it by upgrading your angular-cli.

npm install -g @angular/cli@next

What’s Next?

Angular 6 continues to focus on being smaller, faster and easier to use.

** Features: **

  • RxJS 6 support and reducing bundle sizes form common use cases.
  • Better support for Angular Material. Now Angular Material offers more than 30 components. (new mat-tree, virtual scrolling, and drag & drop helpers will be added soon)
  • Smaller modules through a technique Known as scope hosting.
  • Services can be tree-shakable.
  • New angular-CLI command ng update for updating all dependencies and code.
  • Another angular-CLI command ng add to starting out with some application like Material design rather than with a blank application. Also, it can be used to turning application to Progressive web apps to support offline.
  • Use of bazel tool to build libraries. Before we need to do it by ourselves.
  • Angular CDK(Component Developer Kit) updated.
  • Service worker support(CLI 1.6) to improve performance. with @angular/service-worker we have improved loading performance.
  • Improved Angular Universal and app-shell support to generate static pages on the server side. To add and build a Universal app
ng generate universal {name}
ng build - -app={name}

To generate App Shell

ng generate app-shell [--universal-app <app-name>] [--route <router>]

  • Improved error messages(Something we all needed).

  • Optional TypeScript 2.5 support. If you want to use new features of TypeScript 2.5 but it’s not mandatory.

  • Added support for nativeElement.

  • Added canonical view query.

  • Rename LQuery to LQueries.

  • Add type and hooks to directive def

  • Allow HttpInterceptors to inject HttpClient.

  • Add navigationSource and restoredState to NavigationStart.

  • BREAKING CHANGE for forms ngModelChangewas emitted before its underlying control was updated. But now emitted after the value/validity is updated on its control.

Angular 5:

<input #modelLocal="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelLocal)">
 
onChange(ngModel: NgModel) {
  console.log(ngModel.value);        // logs old value,
}

Angular 6:

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