Whats new in Angular 5 - Features and Improvements

Important announcement : We are moving all our content to new website - Witscad Courses . You can find the updated complete Angular course here - A Complete Angular Tutorial. Feel free to visit.

Angular developers know what Angular mean to the front end development. It's been an excitement for Angular developers as the wait is over with the arrival of Angular 5. Yeah!

The most important part that is the highlight of Angular 5 is that there has been a lot and lot of bug fixes since Angular 4. This makes Angular 5 even more reliable.

These Angular 5 features and improvements is based on the Angular Github change logs collated from all Angular 5 beta and RC versions - https://github.com/angular/angular/blob/5.0.x/CHANGELOG.md

So, here is the list of Angular 5 major features and performance improvements.

Native addEventListener for faster rendering

Angular 5 is now using the Javascript's native addEventListener method to register events. This gives a lot of performance improvement for a complex Angular applications where there are lots of event bindings.

New Router hooks

• Added ActivationStart and ActivationEnd router events
• Two new Angular router hooks have been introduced to add event tracking activation of individual routes. These are ChildActivationStart and ChildActivationEnd

Invalid CSS properties detection

Angular 5 will now report errors in case it finds any discrepancies in the CSS while binding. This includes invalid CSS syntax and properties.

Dropped use of the Intl API from @angular/common

The Intl API from @angular/common has been removed to improve browser support. Intl API is not needed anymore, we extract and use data from Common Locale Data Repository (CLDR) instead.

Angular Pipes changes

Date pipe changes

A new optional parameter - timezone that lets you specify the timezone for a date (it will shift the date values based on the locale timezone so that you see it as it was from this other timezone).

Plural/Decimal/Percent/Currency pipe changes

In all Plural, Decimal, Percent and Currency pipe a new optional parameter locale has been introduced that lets you use a specific locale for this pipe (instead of using the default LOCALE_ID)

New Forms feature - updateOn for Performance Improvements

FormControls, FormGroups, and FormArrays now optionally accept an options object as their second argument. Validators and async validators can be passed in as part of this options object (though they can still be passed in as the second and third arg as before)

There are three ways that are supported and can be used

1. Add updateOn blur option to FormControls
   
   • Add default updateOn values for groups and arrays
   • Add updateOn submit option to FormControls

   By default, the value and validation status of a FormControl updates whenever its value changes. If an application has heavy validation requirements, updating on every text change can sometimes be too expensive. This feature introduces a new option that improves performance by delaying form control updates until the "blur" event. To use it, set the updateOn option to blur when instantiating the FormControl.
   

   const c= new FormControl('', {
      validators: Validators.required,
      updateOn: 'blur'
   });
   

2. Add updateOn support to ngModelOptions
   
   This introduces a new option to template-driven forms that improves performance by delaying form control updates until the "blur" or "submit" event. To use it, set the updateOn property in ngModelOptions.
   

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

3. Add updateOn and ngFormOptions to NgForm
   
   We have now a new Input property called ngFormOptions to the NgForm directive. You can use it to set default updateOn values for all the form's child controls. This default will be used unless the child has already explicitly set its own updateOn value in ngModelOptions.
   Potential values: `change` | `blur` | `submit`
   

   <form [ngFormOptions]="{updateOn: blur}">
     <input name="one" ngModel>  <!-- will update on blur-->
   </form>
   

Deprecate @angular/http

This is one major/breaking change that @angular/http is now deprecated in favor of @angular/common/http.

Changes in @angular/platform-server

• Provided a DOM implementation on the server
• Uses Domino - https://github.com/fgnass/domino and removes dependency on Parse5. With this change, platform-server also exposes a DOCUMENT and nativeElement that is closer to the client.
• Users can provide a RENDER_MODULE_HOOK multi-provider that can insert/change document state just before it is rendered.
• Added an API to transfer state from server : TransferState provides a shared store that is transferred from the server to client. To use it import BrowserTransferStateModule from the client app module and ServerTransferStateModule from the server app module.

Changes in @angular/compiler

The Angular compiler now requires TypeScript 2.4.x. Apart from this few other changes have been introduced.

• It allow multiple exportAs names.
• Enabled strict checking of parameters to an @Injectable
• Reuse the TypeScript typecheck for template typechecking

New Angular package - @angular/service-worker

A new Angular package - @angular/service-worker has been introduced in Angular 5 release which wraps the major functionality of browser service workers. We can brief them as:
@angular/service-worker - a library for use within Angular client apps to communicate with the service worker.
@angular/service-worker/gen - a library for generating ngsw.json files from glob-based SW config files.
@angular/service-worker/ngsw-worker.js - the bundled service worker script itself.
@angular/service-worker/ngsw-cli.js - a CLI tool for generating ngsw.json files from glob-based SW config files.

That's all folks! Feel free to mention any new Angular 5 features or any code samples in comments that is not mentioned here. We will add the same here with your attributions.