What’s new in Angular 5?
Angular 5 brings some new features to the popular JavaScript framework for building mobile, desktop and web applications.
Angular 5 Support Typescript 2.4
String-based enums are a new feature introduced in TypeScript 2.4. This means that the members of an enum can now be expressed with a string instead of a number.
enum Status {Active = "ACTIVE", Inactive = "INACTIVE", Pending = "PENDING"}
For more details please click here.
HttpClient (Http Deprecated)
Http is deprecated in version 5. The HttpClient API from @angular/common/http package is now recommended for use in all apps.
HttpClient is Angular’s mechanism for communicating with a remote server over HTTP.
To make HttpClient available everywhere in the app,
open the root AppModule,
import the HttpClientModule symbol from @angular/common/http,
add it to the @NgModule.imports array.
import { HttpClientModule } from '@angular/common/http';
Following features include in HttpClient API :
- Typed, synchronous response body access, including support for JSON body types.
- JSON is an assumed default and no longer needs to be explicitly parsed.
- Interceptors allow middleware logic to be inserted into the pipeline.
- Immutable request/response objects.
- Progress events for both request upload and response download.
- Post-request verification and flush-based testing framework.
i18N Pipes (Internationalized Number, Date, and Currency Pipes)
Angular 5 added new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills.
In Angular 5, you can now give multiple names to your components and directives while exporting.
Exporting a component with multiple names can help your users migrate without breaking changes.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], exportAs:'userList, userPage' }) export class AppComponent { title = 'TechnoWalkers'; }
Improved Decorator Support in Angular 5
Angular 5 now supports expression lowering in decorators for lambdas, and the value of useValue, useFactory, and data in object literals. Furthermore, a lambda can be used instead of a named function like so:
Component({ provider: [{provide: 'token', useFactory: () => null}] }) export class MyClass {}
Router
The Angular Router has been extended with additional events. Now, for example, you can create progress displays that display when a route is changed. The corresponding events are ActivationStart and ActivationEnd or ChildActivationStart and ChildActivationEnd.
Forms Validation in Angular 5
In Angular 5, forms now have the ability to decide when the validity and value of a field or form are updated via on blur or on submit, instead of every input event.
<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}"> <form [ngFormOptions]="{updateOn: 'submit'}">
Faster Compiler in Angular 5
A lot of improvements have been made to the Angular compiler to make it faster. The Angular compiler now leverages TypeScript transforms. You can take advantage of it by running:
ng serve --aot
Some more updates :
- NgFor has been removed as it was deprecated since v4. Use NgForOf instead. This does not impact the use of *ngFor in your templates.
- The compiler option enableLegacyTemplate is now disabled by default as the <template> element was deprecated since v4. Use <ng-template> instead. The option enableLegacyTemplate and the <template> element will both be removed in Angular v6.
- The method ngGetContentSelectors() has been removed as it was deprecated since v4. Use ComponentFactory.ngContentSelectors instead.
- ReflectiveInjector is now deprecated. Use Injector.create as a replacement.
- NgProbeToken has been removed from @angular/platform-browser as it was deprecated since v4. Import it from @angular/core instead.
Check out other Angular 5 updates here.