What’s New in Angular 6.0.0?

Angular has come out with some amazing new features in version 6.0, especially in Angular-CLI. This is a major release focused more on the toolchain. Now, with Angular 6, you can easily update old packages, create native web elements using Angular Elements, and many other things.

Some Notable Features in Angular 6.0.0

1. Ng Add:
This new command of Angular-CLI built on top of schematics and the NPM registry to helps you install and download new packages in angular apps (same as NPM, but it doesn’t replace it).Ng add will use package manager to download new dependencies and invoke an installation script which can update project with configuration changes, add additional dependencies (e.g. polyfills), or scaffold package-specific initialization code.Examples –

• Ng add @ng-bootstrap/schematics: Add ng-bootstrap to application.
• Ng add @angular/material: Install and setup Angular Material and theming and register new starter components into ng generate.

2. Ng Update
This new command of Angular-CLI used to update and upgrade packages. Means it’ll help you to adopt the right version of dependencies, and keep dependencies in sync. 3rd parties can also provide update scripts using schematics.Ng Update uses NPM or yarn to manage dependencies. In addition to updating dependencies and peer dependencies, ng update will apply needed transforms to project.Examples/Usage –

• When angularjs developers want to upgrade from Angular 5 to Angular 6, or any other package in Angular app.
• It’ll analyze package.json file and uses its knowledge of Angular to recommend updates to application.
• Ng update @angular/core: It will update all of the Angular framework packages as well as rxjs and typescript, and will run any schematics available on these packages to keep us up to date. As part of this one command, it’ll automatically install rxjs-compat into application to make the adoption of RxJS v6 smoother.

3. Angular Elements
With this new feature, now we are able to render Angular elements as native web elements, and they’re interpreted as trusted HTML elements.Example Steps –

• Adding Angular elements by running ng add @angular/elements command.
• Importing customElement in component using import { customElement } from ‘@angular/elements’;
• Creating customized element as show in below Image.

import{Component,Injector}from '../../node_modules/@angular/core';
import{DomSanitizer}from'@angular/platform-browser';
import{CustomElementComponent}from './alert/alert.component';
 
@component({
    selector:'app-root',
    template:'<div [innerhtml]="content"></div>',
    StyleUrls: ['./app.component.css']
 })
 
 export class AppComponent{
    content=null;
    constructor(private injector: Injector, domsanitizer:DomSanitizer){
	const customEle=customElement(CustomElementComponent, {injector:this.injector});
        customElements.define('custom-elem',customEle);
	this.content=domsanitizer.bypassSecurityTrustHtml('<custom-elem name="I am Angular 6."></custom-elem>');
    }
  }

• CustomElementComponent.ts

import{Component, OnInit, Input} from'@angular/core';
 
@Component(
    selector:'app-alert',
    template:'<div><h2>Hello World! {{name}}!</h2></div>',
    styleUrls:['./alert.component.css']
})
 
export classCustomElementComponent implements OnInit{
    @Input() name: string;
 
    constructor(){
          //do something
    }
 
    ngOnInit(){
	 //do something
    }
}

• Result (Output)Hello World! I am Angular 6.

4. Angular Material
Once we add material (ng add @angular/material) to project, we will able to generate three new starter components.

1. Material Dashboard We can now generate a dashboard component containing a dynamic grid list of cards using Ng Generate command. (Example: ng generate @angular/ material:material-dashboard –name=my-dashboard. my-dashboard is a dashboard component name)
2. Material Sidenav We can now generate a side navigation component including a toolbar with the application name and the side navigation using Ng Generate command. (Example: ng generate @angular/material:material-nav –name=my-nav. my- nav is a sidenav component name)
3. Material Data Table We can now generate a data table component which is pre-configured with a data-source for sorting and pagination using Ng Generate command. (Example: ng generate @angular/material:material-table –name=my-table. my- table is a datatable component name)

5. Library Support
Angular 6 also supports creating and building libraries using “ng generate library {name}” command.This command will create a library project within CLI workspace, and configure it for testing and for building.

• Import library: import { something } from ‘my- library’;
• Build library: ng build my-lib
• Unit test library: ng test my-lib
• Lint library: ng lint my-lib
• Publish library: ng build my- library –prod or cd dist/my- library or npm publish

6. Tree Shakable Providers
This features helps to make application smaller. This feature moved from modules referencing services to services referencing modules.
Before

• In module

@NgModule({
   providers:[MyService]
})
export class AppModule{}

• In service

import{injectable}from'@angular/core';
 
@Injectable()
 
export class MyService{
   constructor(){
         //do soemething
   }
}

After

• No references needed in NgModule

import{injectable}from '@angular/core';
 
@injectable({
     ProvideIn: 'root',
})
export class MyService{
    constructor(){}
}

• So using this feature we can only bundle services into code base in modules where they are injected.

7. Animations Performance Improvements
No polyfills needed as implementation of Animations are updated, which reduce the application bundle size.

8. Updated to use RxJS v6
This version of Angular has been updated to use v6 of RxJS. So now we can use several major changes released in latest RxJS, along with a backwards compatibility package rxjs-compat that will keep applications working.AngularJS development company with the set of updates in Angular 6 can bestow their clients the functionalities that were complex earlier or somehow affecting the performance speed, but now it is improvised.Time is not back, Angular 7 is soon expected to come up with exciting updates that will to much extent meet the expectations of angular js developers.