Angular 5

Angular 5 was announced to the world on November 1, 2017; this release focused on making the Angular framework lighter and easier to use. Let’s have a look at few of the major changes implemented in Angular 5:

1. HTTP requests module

The previous Angular module for making HTTP requests, @angular/http, was deprecated from Angular 5 onwards; it was replaced with @angular/common/http. In Angular 5, object literals can be used directly as headers and arguments instead of calling HttpHeaders and HttpParams for the same purpose. For example, the following lines

const my_headers = new HttpHeaders().set('Authorization', 'open');
const my_params = new HttpParams().set('back_track', false);

can now be written as:

const my_headers = { 'Authorization': 'open' };
const my_params = { 'back_track': false };

2. Improved Animations

Angular 5 introduces two more transition aliases:

• :increment
• :decrement

Example: if the transitions of a carousel vary with each slide you can use the following line instead of manually defining the transitions.

transition(':increment')

3. Build Optimizer

In Angular 5, production builds created with the Angular CLI will apply to the build optimizer by default.

The build optimizer removes Angular decorators from runtime codes, which reduces the size of the final package bundle and significantly increases the boot speed of the application.

The optimizer also removes the part of the application that is not required during runtime – this leads to a smaller bundle size and a smoother onboarding experience.

4. Form

The FormControl class in Angular 5 now allows us to pass an options object as an argument where the validators of the form are defined. The updateOn function takes on three values:

• change: values and validation constants are updated on every change.
• blur: values and validation constants are updated when the respective is no longer the selected one.
• submit: values and validation constants are updated when the form is submitted.

Have a look below at the example below:

this.LoginForm = new FormControl({
  Username: '',
  Password: ''
}, { updateOn: 'blur' });