Angular 5 New Features

3 Min Read 210 Views

Angular 5.0.0 was released on 01-November-2017. This is a major release announced by Angular Team – Pentagonal-donut.

Given below are useful & major points from Angular 5

  • The build optimizer is a tool and it is increasing the boost of your application & decorators are used by the compiler & removed from runtime code.
  • Angular Universal State Transfer API and DOM Support- Added Server side render and  Domino to platform-server.
  • Improved the Angular compiler to support incremental compilation. This provides faster rebuilds, especially for production builds and builds with AOT(Ahead of Time)
  • Improved decorator support for this action, you can now use a Lambda instead of a named function
Component({
provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}
  • In Angular we have relied on the browser to provide number, date, and currency formatting using browser i18n APIs. This resulted in the need for a polyfill for most developers
 

Replace the ReflectiveInjector with StaticInjector : In order to remove even more polyfills, we’ve replaced the ReflectiveInjector with the StaticInjector. This injector no longer requires the Reflect polyfill, reducing application size for most developers.

Before

ReflectiveInjector.resolveAndCreate(providers);

After

Injector.create(providers);

  • Angular Forms adds updateOn Blur / Submit:You can now run validation and value updates on `blur` or on `submit`, instead of on every input event

Before

<input name="firstName" ngModel>

After

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

or

<form [ngFormOptions]="{updateOn: 'submit'}">

Reactive Forms

Before

new FormGroup(value);
new FormControl(value, [], [myValidator])

After

new FormGroup(value, {updateOn: 'blur'}));

new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

This recent release of RxJS fully empowers developers to avoid the side effects of the previous import mechanism with a new way of using RxJS called “lettable operators”

Instead of

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

You can now

import{ Observable } from 'rxjs/Observable';
import{ map, filter } from 'rxjs/operators';
names = allUserData.pipe(
map(user => user.name),
filter(name => name),
);

  • New Router Lifecycle Events:These events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure performance of guards and/or resolvers

class MyComponent {
constructor(public router: Router, spinner: Spinner) {
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
spinner.start(e.route);
} else if (e instanceof ChildActivationEnd) {
spinner.end(e.route);
}
});
}
}

You want to know more about angular 5.0.0 release from Stephen Fluin Blog & See Change log from GitHub

Tags: