Angular 5 New Features In Less Than 5 Minutes [Rel. 23rd Oct 2017]

Angular version 5.0 has been released on 23rd Oct’17. It’s also called pentagonal-donut. Basically, this article will help you to know about Angular 5 new features and what’s new in Angular 5 by comparing it from Angular 4.

Angular team is mainly focused on making this releases to make the Angular smaller, faster and easier to use.

The major changes list here of Angular 5.0

Angular 5 New Features

As mentioned, the Angular 5.0 (pentagonal-donut) has been released with number of improvements and few of new additions.

Mostly, Angular team has focused on helping to create progressive apps by providing features that will help us to build smaller and faster apps in easier manner.

If your Angular app requires the performance upgradation, you should not wait and go for the Angular 5 right away.

So, let’s dig into the new features of Angular 5.

1. Build Optimizer for Performance

Angular team has added a build optimizer inside an Angular CLI in version 5.0

This tool will basically make your bundle size smaller and optimize the performance of your app.

2. Angular State Transfer API

In Angular 5.0, you can easily share application state between the client side and server side of your application by using ServerTransferStateModule and the corresponding BrowserTransferStateModule

3. Compiler Improvements

Compiler improvements are mainly focused on improving the performance of Angular app by making the bundle size smaller.

3.1 TypeScript Transforms

If you’re developer and you have worked on Angular 2/4, you might be familiar about the slowness of build recreating.

In Angular 5, a new AOT introduced to make the rebuilding faster. Developers should take an advantage by serving their app with aot flag on.

ng serve --aot

3.2 Preserve Whitespace

So far, the tabs, newlines, and spaces have been added in your templates by the compiler. Now, you can choose true or false for preserve whitespaces to your components and applications.

You can define it for a particular component.

@Component({
 templateUrl: 'about.component.html',
 preserveWhitespaces: false
}
export class AboutComponent {}

Also, you can define it globally application wide in tsconfig.json

{
 "extends": "../tsconfig.json",
 "angularCompilerOptions": {
   "preserveWhitespaces": false
 },
}

Read more about preserveWhiteSpaces.

4. Improved Decorator Support

Angular 5, now supports the expression lowering in decorators for lambdas and the value of useValue, useFactory and data in object literals.

5. Internationalized Number, Date, and Currency Pipes

The Angular 5, is providing new number, date, and currency pipes that increase standardization across browsers

<p>{{ 10.6 | currency:'CAD' }}</p>
<!-- will display 'CA$10.60' -->
<p>{{ 10.6 | currency:'CAD':'symbol-narrow' }}</p>
<!-- will display '$10.60' -->
<p>{{ 10.6 | currency:'CAD':'code':'.3' }}</p>
<!-- will display 'CAD10.600' -->

If you’re not ready to use new pipes, you can still stays with the old pipes by importing DeprecatedI18NPipesModule, more on pipes

6. StaticInjector

Angular 5 has the replacement of the ReflectiveInjector with the StaticInjector

• Before

  ReflectiveInjector.resolveAndCreate(providers);
  

• After

  Injector.create(providers);
  

7. Zone speed improvements

Now, it’s possible to bypass the zones for performance focused applications.

To bypass zones, you can bootstrap your application with noop as your ngZone.

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

8. The new exportAs keyword

Now, you can have multiple names for your components and directives.

@Directive({
   selector: ‘[multiple-export-as]’, 
   exportAs: ‘dirX, dirY’
})	

9. HttpClient, a minore change

Angular team has depricated the use of @angular/http library. To update, just replace HttpModule with HttpClientModule from @angular/common/http

HttpClient will stays in @angular/common as a smaller and more powerful module.

10. 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.

10.1 Template Driven Forms

• Before

  <input name="firstName" ngModel>
  

• After

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

10.2 Reactive Forms

• Before

  //Form group
  new FormGroup(value);
  //Form control
  new FormControl(value, [], [myValidator])
  

• After

  //Form group with updateOn
  new FormGroup(value, {updateOn: 'blur'}));
  //Form control with updateOn
  new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
  

11. Updates on RxJS 5.5

Angular team had updated the use of RxJS to 5.5.2 or later.

• Before

  //Import observable
  import { Observable } from 'rxjs/Observable';
  //Import map operator
  import 'rxjs/add/operator/map';
  //Import Filter operator
  import 'rxjs/add/operator/filter';
  

• After

  //Import observable
  import { Observable } from 'rxjs/Observable';
  //Import map and filter together
  import { map, filter } from 'rxjs/operators';
  

12. New Router Lifecycle Events

They have introduced the new events GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd.

13. Two new uses for Animations

:increment and :decrement, the two new transition aliases are introduced.

• Before

  transition('0 => 1, 1 => 2, 2 => 3, 3 => 4', ...)
  

• After

  transition(':increment')
  

Now, it’s easy to upgrade your Angular 4 app to Angular 5.0

That’s it, it was the list of Angular 5 new features. If you’re looking to update version 5, This guide will help your app to update between Angular versions and further details can be found here.

Moreover, the Angular team has provided many new improvements, especially for the performance-focused application.

I hope, now you got the idea on Angular 5 new features and improvements over Angular 4.