Angular 5 New Features

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

After

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

or

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