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.
Leave a Reply