Home / Resources / Blog / What Makes Angular 5 Unique

What Makes Angular 5 Unique

Angular 5

Dispensing all the speculations regarding its delayed launch, Angular 5 was released successfully in last November. Angular 5 succeeds the version 4.4.0, and is focused on making the framework lighter, faster and easier to use. It is a popular JavaScript MVW framework that supports the creation of progressive web applications, and comes with an improved Compiler and Typescript and has a build optimizer tool.

This post will take you through the major changes that has occurred in version 5.

Cuts out Http, recommends HttpClient

Prior to Angular version 4.3, the @angular/http module was used for making HTTP requests in Angular applications. Version 5 of Angular has denounced Http. The HttpClient API from @angular/common/http package that was shipped in version 4.3, is now recommended for use in all applications. HttpClient also supports a parameter object for headers and parameters. This saves the typing effort, as you can see here:

http.get("/api", { headers: { "X-DEMO-HEADER": "demo" }, params: { "foo": "bar" }, })

Supports exporting a component with multiple names

Check out this example:

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], exportAs:'dashboard, logBoard' }) export class AppComponent { title = 'app'; }

Doing away with i18n polyfills

Angular 5 eliminates the need for i18n polyfills. Since it arrives with new number, date and currency pipes, it increases standardization across browsers. Localization supported by Angular is based on the export of data from Unicode Common Locale Data Repository (CLDR).

For instance, the default is US-English locale “en-US”. If you require another location or language, you need to import it on the first place.

In this case, the code given below is necessary to import the German locale “de” (equivalent to “de-DE” in the Intl-API) in the AppModule:

import { registerLocaleData } from '@angular/common'; import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDe);

The imported location can now be used as usual:

@NgModule({ // ... providers: [{provide: LOCALE_ID, useValue: 'de'}] }) export class AppModule{}

Router Lifecycle Events

Angular 5 has introduced some new lifecycle events to the router. The events include GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, and ChildActivationEnd.

These events support developers to closely track the cycle of the router, right from the beginning, that is from running guards through activation completion.

For example, the implementation of a spinner could appear as shown below:

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() } });

Animations Package

Angular 5 has animations package extended with several syntax ingredients. It uses two transition aliases to respond to numerical value changes, named :increment and :decrement for animating corresponding transitions. Take a look at the following code to see how it works:

@Component({ animations: [ trigger("counter", [ transition(':increment', [ /.../ ]), transition(':decrement', [ /.../ ]), ]) ], template: <span [@counter]="count"> }) class MyComponent() { count = 1; }

Angular 5 Compiler is faster

The Angular 5 compiler is faster than its previous versions. Optimizations to the compiler improves execution. It leverages TypeScript transforms. You can take advantage of the compiler by running the following code.

ng serve --aot

Validating Forms in Angular 5

Angular 5 forms offer us 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.

Two examples are given below:

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

<form [ngFormOptions]="{updateOn: 'submit'}"> In the case of Reactive forms, check out the following option:

ngOnInit() { this.newUserForm = this.fb.group({ userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }] }); }

Support for TypeScript 2.4

Angular 5 now extends formal support to TypeScript version 2.4. Since its release of version 4.3, Angular has offered error-free support to TypeScript 2.3. This includes the Strict-Null-Check option.

String-based enums are introduced in TypeScript 2.4. This means that the members of an enum can now be expressed with a string instead of a number. Take a look at the following example.

enum Colors {Red = "RED", Green = "GREEN", Blue = "BLUE",} In the above case, the string enums cannot be mapped backwards like their number-based relatives. Therefore, a query like Colors [“RED”] cannot catch the string “Red”.

Advanced Build Optimizer

We have already discussed that Angular 5 is designed to be faster, lighter and easier to use. In Angular 5, production builds are created with Angular CLI. This applies the build optimizer by default. The build optimizer helps in increasing the boot speed of your application. It reduces the size of your bundle by removing decorators from application’s runtime codes. Using tree-shaking, build optimizer also removes part of your application that is not required during runtime. With a decreased bundle size, your application runs faster.