What’s New in Angular 5

Angular is an all-encompassing JavaScript framework that is recurrently used by the developers all over the world for building web, desktop, and mobile applications. In this article, we will be covering the new features in Angular 5 and several other changes.

The update from AngularJS to Angular 2 was a very big step forward, but it was also ill-famed for not being backward compatible. In contrast, Angular 4 brought new features despite the fact being backward compatible. And now, six months later, the latest major release is available.

The upgrade to Angular 5 is a new increased version. Many of the changes are done in this version are invisible.

The major focus of Angular 5 is to make Angular faster.

TYPESCRIPT 2.4 SUPPORT IN ANGULAR 5

Angular 5 now formally supports TypeScript version 2.4. Previous versions of Angular have supported TypeScript 2.3 without errors since release 4.3, including the Strict-Null-Check option.

Below are the some of the key features from the latest TypeScript:

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. Let’s see an example below.

enum Colors {Red = “RED”, Green = “GREEN”, Blue = “BLUE”,}

Note that in this look, string enums cannot be mapped backward like their number-based relatives. Therefore, a query like Colors [“RED”] is not possible to catch the string “Red”.

Also, the latest version of TypeScript advances type checking with regards to generics.

On the other hand, type checking is becoming stricter and the return types of generic functions can now also be inferred. For instance, the subsequent call leads to an error:

let foo: Promise = new Promise(resolve => {
resolve(“bar”);
// Error
});

Another development is the so-called Weak-Type-Detection. Types are weak if they only own optional parameters which can now be detected. Here is an example of this kind of type:
export interface Options {
showSideNav?: boolean;
description?: string;
}

BUILD

Even for advanced web applications, updates in the framework are not enough, the build tooling has to be extended.

This is exactly what happens with Angular-CLI in other areas. The static analysis of the AOT mode is partly done in the normal build. Thus, many errors are noticed earlier at build time and not at runtime.
The AOT mode has also been fast-tracked in order to support incremental builds and significantly reduce built time.

For faster builds, a build tool from Google called Bazel can be integrated. However, it is still in a very initial stage of development at the moment. In the future, the Google Closure Compiler can also be used more rigorously to achieve more optimized build results.

FORMS

To improve performance, the developer can now specify when validators should be executed in forms.

Every time a FormControl value is changed, the validation will be performed accordingly – potentially with every major element. In the case of more difficult validations, this can lead to an unusual worse performance.

With the new updateOn option, Angular 5 also allows the developer to specify more exactly when this validation should be performed. The developer can select change, which requires the previous behaviour, submit or blur options.

USAGE WITH TEMPLATE-DRIVEN FORMS

For forms that are defined through a template, the updateOn parameter presented with Angular 5 can also be stated. This is done at ngModelOptions, as shown in the below example:

<input type=”email” ngModel [ngModelOptions]=”{updateOn: ‘submit’}”>

Here the setting is inherited from the element interleaving in the DOM. In the following example, the setting is made directly in the element of the form:

<form [ngFormOptions]=”{updateOn: ‘submit’}”>

<input name=”email” ngModel type=”email”>

<input name=”password” ngModel type=”email”>

</form>

A subordinate element can overwrite the default value just as reactive forms.

<form [ngFormOptions]=”{updateOn: ‘submit’}”>

<input name=”email” ngModel type=”email” [ngModelOptions]=”{updateOn: ‘blur’}”>

<input name=”password” ngModel type=”email”>

</form>

ROUTER

The Angular Router has been stretched with additional events. Now, for example, the developer can create progress displays that will display when a route is changed. The corresponding events are ActivationStart and ActivationEnd or ChildActivationStart and ChildActivationEnd.

router.events

// Event = RouteEvent | RouterEvent

.filter(e => e instanceof RouteEvent)

.subscribe(e => {

if (e instanceof ActivationStart) {

spinner.start();

} else if (e instanceof ActivationEnd) {

spinner.end()

}

});

THE VERDICT

Angular 5 came with new features and major enhancements. It is smaller and faster. We are very happy with what

the Angular team achieved with this release.

Have you switched to Angular 5 yet? What are your opinions? Did you notice any major enhancements? Try and let us know your opinion on the new upgrade of Angular.