Wait, when was Angular 3 released?

Google releases Angular patch every week, minor changes every 3 months, major changes every 6 months.

So 6 months after Angular 2’s release, it was to be Angular 3, right?

The simple reason why they decided to roll out the next version as Angular 4 was so that the number of the upgrade correlates with the Angular version 4 router planned for usage with the release.

So now coming to what’s new in Angular 4,

Smaller and Faster

Application built with Angular4 is smaller and faster as compared to Angular. It reduces the size of the app by around 60% in most cases.

It supports AOT compilation and tree shaking as well. They have extracted the animation library from the core library and added it as an independent library in turn enhanced its speed further.

Template View Change

They have introduced ‘else’ and ‘as’ keywords in ‘ngIf’ and ‘ngFor’ respectively.

Example for *ngIf

<div *ngIf="movie.length >0; else empty">

<p>movies</p>

</div>

<ng-template #empty>

<p></p>

</ng-template>

Explanation:

If length of the array is greater than 0, it prints movies else it executes empty part referenced by ng-template.

Example:

<div *ngFor="let movie of movies | slice:0:1 as favourite">

<h1> {{favourite}} </h1>

</div>

Explanation:

It returns the first element of an array and stores it in the variable favourite. In other words, we can access the result through the variable favourite.

Email Validation

It has also made verifying email easier. All we need to do is placing email as attribute of the input tag.

<form #emailForm="ngForm" class="form-group">

<label class="m-t-20">EMAIL</label>

<input type="email"

ngModel

required

name ="email"

email

class="input-lg">

<br>

<button class="btn btn-success" [disabled]="!emailForm.valid"

type="submit">Validate</button>

</form>

Explanation:

It keeps the button disabled until a valid Email address is received as input.

Pipes

Angular 4 introduced a new titlecase, pipe. It changes the first letter of each word into uppercase:

Ex:

<p>{{ ‘hello world’ | titlecase }}</p>

Explanation:

It displays Hello World

TypeScript 2.1 and 2.2 compatibility

They updated Angular to a more recent version of TypeScript. This has improved the speed of ngc and we will get better type checking throughout application.

Now,

How difficult it is to upgrade to Angular 4 from Angular 2?

Not much. In most cases, just updating the package.json and tsconfig.json files is all that’s needed.