What’s new in Angular 4?

Angular 4 was released last week, following the new schedule set by the Angular team that decided to release one new major version every 6 months.

Wait, where is Angular 3?

There won’t be any Angular 3. That’s because the Angular Router package was already at version 3.x, while all other Angular packages were at version 2.x. The Angular team decided to jump to version 4.0 for all those packages so that they are back in sync from a versioning perspective.

Is Angular 4 another full rewrite of the framework?

No, quite the opposite actually. Angular 4 is really an Angular 2++. The versioning strategy changed but the code is not different at all. If you know how to work with Angular 2, then you already know Angular 4.

So what’s new then?

In a nutshell,  Angular is smaller and faster. many improvements have been made under the hood to make sure that your code compiles down to something that is more efficient and less verbose.

In most cases, code generated with the AOT option is 60% smaller than before, which is a huge improvement.

The animations were moved from @angular/core to their own package so that if you don’ t use animations, your app code can get even smaller.

From a code perspective, the only real difference you can experience is the addition of  “else” conditions to ng-if as well as some other syntax improvements summarized in this snippet:

<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count" [user]="user">
  </user-profile>
  <div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>

Everything else remains unchanged so no painful migration ahead!

Another major update is that Angular 4 works with TypeScript 2.1 and 2.2, which is also an intresting update to get more out of TypeScript as well.

For a full list of what’ s new in Angular 4, don’t hesitate to take a look at the release post on the official blog.