Angular 6 Features

On 4^th May 2018 angular team announced new version of Angular i.e., Angular V6. In this major release they are not much focusing on Framework but on toolchain. They have tried to unify the framework, CLI, and Material more. In this article we will talk about some of the major features Angular team have come up with Angular 6.

Framework features

• @angular/core is now depends on
  • TypeScript 2.7
  • RxJS 6.0.0
  • tslib 1.9.0
• @angular/platform-server now depends on Domino 2.0
• The <template> tag was deprecated in Angular v4 to avoid crashes (i.e. when using Web Components). Now we can use same it with <ng-template>

Before it was like

<template>some template content</template>

After:

<ng-template>some template content</ng-template>

• ngModelChange is now emitted after the value/validity is updated on its control.

Previously, ngModelChange was emitted before its underlying control was updated. This was fine if you passed through the value directly through the $event keyword, e.g.

<input [(ngModel)]="name" (ngModelChange)="onChange($event)"> 
 onChange(value) { 
  console.log(value); // would log updated value 
}

However, if you had a handler for the ngModelChange event that checked the value through the control, you would get the old value rather than the updated value. e.g:

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

Now the value and validity will be updated before the ngModelChange event is emitted, so the same setup will log the updated value.

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

CLI Features

• ng eject

The ‘eject’ command has been temporarily disabled, as it is not yet compatible with the new angular.json format. The new configuration format provides further flexibility to modify the configuration of your workspace without ejecting. Ejection will be re-enabled in a future release of the CLI.

In the meantime, you can eject with 1.7.4, then update your project and keep using webpack to build

• ng update

A new Angular CLI command to help simplify keeping your projects up to date with the latest versions. Packages can define logic which will be applied to your projects to ensure usage of latest features as well as making changes to reduce or eliminate the impact related to breaking changes.

• ng add

A new Angular CLI command provides package authors the ability to include dynamic setup instructions as part of the installation procedures. When a user installs a package via ng add and that package includes a schematic named “ng-add” logic will run to set up that package within your project.

For package owners:
ng-add is powered by a single schematic named “ng-add” within your package’s schematics collection. Options will be passed through to your schematic when running the schematic to allow for further configuration options.

• PWA Support

Adding the configuration and assets to configure your applications as PWAs can be confusing and time consuming, to simplify the process you can now run ng add @angular/pwa --project [project-name] to configure the supplied project as a progressive web application.

Material 6.0 Features

• With the Angular CLI v6.0+, you can use the ng update command to automatically migrate to the new APIs

  ng update @angular/material

• A number of APIs that were deprecated during beta have been removed

Summary

This is not full list of features but the most important one. If you are interested to read all the change log visit these links framework, material+cdk, cli.

Want to perform CRUD operations using Angular 6 then try out this article

Yatendrasinh Joddha

I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs