What's new in Angular 5 - ajayupreti/Tech.Blogs GitHub Wiki

Angular - Google’s popular JavaScript framework - has released Angular 5, which arrived 1 November 2017. The previous Angular version was 4.4.0. Let's go through the major changes in version 5.

Following is a summarized list of differences from Angular 2 to 5.

A lot of improvements have been made to the Angular compiler to enhance faster rebuilds for production and AOT (Ahead of Time) builds. The Angular compiler now leverages TypeScript transforms. You can take advantage of it by running:

ng serve --aot

Before version 4.3, the @angular/http module was used for making HTTP requests in Angular applications. The Angular team has now deprecated Http in version 5. The HttpClient API from @angular/common/http package that shipped in version 4.3 is now recommended for use in all apps.

import { HttpClientModule } from '@angular/common/http';

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:'dashboard, logBoard'
})
export class AppComponent {
  title = 'app';
}

Angular 5 ships with the new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills.

import { NgModule } from '@angular/core';
import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';

  @NgModule({
    imports: [
      CommonModule,
      // import deprecated module after
      DeprecatedI18NPipesModule
    ]
  })
  export class AppModule { }

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:

In Angular 5

  Component({
    provider: [{provide: 'token', useFactory: () => null}]
  })
  export class MyClass {}

Before Angular 5

  Component({
    provider: [{provide: 'token', useValue: calculated()}]
  })
  export class MyClass {}

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.

Example Usage

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

Another Example

<form [ngFormOptions]="{updateOn: 'submit'}">

In the case of Reactive forms, you can add the option like so:

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

In Angular 5, we have two new transition aliases, :increment and :decrement.

animations: [
  trigger('valueAnimation', [
    transition(':increment', group([
      query(':enter', [
        style({ color: 'green', fontSize: '50%' }),
        animate('0.8s ease-out', style('*'))
      ])
    ])),
    transition(':decrement', group([
      query(':enter', [
        style({ color: 'red', fontSize: '50%' }),
        animate('0.8s ease-out', style('*'))
      ])
    ]))
  ])
]

• NgFor has been removed as it was deprecated since v4. Use NgForOf instead. This does not impact the use of *ngFor in your templates.

When you use *ngFor, the Angular compiler de-sugars that syntax into its cannonical form which has both attributes on the element.

So,

  <div *ngFor="let item of items"></div>

de-sugars to:

 <template [ngFor]="let item of items">
     <div></div>
 </template>

This first de-sugaring is due to the '*'. The next de-sugaring is because of the micro syntax: "let item of items". The Angular compiler de-sugars that to:

 <template ngFor let-item="$implicit" [ngForOf]="items">
   <div>...</div>
 </template>

(where you can think of $implicit as an internal variable that the directive uses to refer to the current item in the iteration).

In its canonical form, the ngFor attribute is just a marker, while the ngForOf attribute is actually an input to the directive that points to the the list of things you want to iterate over.

The Angular team built a Upgrading tool to make upgrading as easy as possible.

This release focused on making Angular smaller and faster to use.