What’s New In Angular 6.0.0

In this blog, you will learn all that is new in Angular latest version 6.0.0 and how it increases the productivity of the developers. Please have a read below:

Angular Elements

This concept has been introduced in Angular for the first time. It is believed that Angular elements increases the productivity of developers as it allow us to use Angular component outside Angular environment! Isn’t it a cool feature that’s just been introduced? You can now use this piece of code into your React.js or Vue.js.

To build custom web elements refer this
“https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b”

Basically, Angular elements are custom elements that you can use in any web application. This way, you can also write re-usable components thereby increases the reusability.

RXJS6 (Observables)

If you ask me what the biggest change in Angular 6 is, I must say it’s the new RXJS version 6. Internal package of RXJS has been changed, imports as well as RXJS operators have been changed too.

But oh wait! What should you do if you accidentally updated your older projects to Angular 6 but want to use previous methods of RXJS?

If you want to stick with the previous RXJS, just run the following command and you’re done:

npm install –save rxjs-compat

Imports changes

Before:

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

Now:

import { Observable, Subject } from 'rxjs';

Before:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

Now:

import { map, take } from 'rxjs/operators';

Operators

catch() becomes catchError()
throw() becomes throwError()
do() becomes tap()
finally() becomes finalize()
switch() becomes switchAll()

Usage

Before:

this.http.map()
this.http.catch()

Now:

this.http.pipe(
	map(data => { })
	catchError(erro=> {
		return throwError(‘msg’); 
}))

Depreciation and Removals

Template

<template> has been removed and <ng-template> will be used.

Http

@angular/http has been deprecated and @agnular/common/http will be used.

Registering Providers

Instead of providing all services in app.module.ts providers array, we can inject provider to root from service.ts and access from anywhere. This helps in shortening the code.

Before:

App.module.ts
Import { employeeService } from ‘./employee.service’;
Provider: [ employeeService ];

Now:

App.module.ts
// no need to import any service here.
Provider: [ ];
Emplyee.service.ts
Import { injectable } from ‘@angular/core”
@Injectable({
	providedIn: ‘root’
	})
Export class EmployeeService{
}

This was it! Now you can easily use Employee Service anywhere in your code.

NgModelChange fixed

Before:

<input #modelDir=”ngModel” [(ngModel)]=”name” (ngModelCahnge)=”onChange(modelDir)”>

onChange(ngModel: NgModel)
{
	Console.log(ngModel.value);  // log old value, not the updated value.
}

Now:

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

Angular Cli + material starter template

Angular Cli is updated with cool starter Angular material templates. After integrating Angular material with your Angular 6 app, you can generate these material templates by running the following commands.

Run:

ng generate @angular/material:material-nav --name=my-nav

Generates:

Run:

ng generate @angular/material:material-dashboard --name=my-dashboard

Generates:

Run:

ng generate @angular/material:material-table --name=my-table

Generates:

And that’s it!

Please feel free to comment or reach out if you have any questions. In case you need any help with installation, integration, upgradation and customization of your Magento 2 web store, please get in touch with us.

Blog Post