What's new in Angular 4

Deprecated : <template>

<template> => <ng-template>

The rationale of this change is to improve the inter-operability with web components that might make use of the <template> tag.

New feature : ELSE

In v2, for if/else statement in html, we should have done :

<p *ngIf="shouldBeDisplay">I should be displayed if shouldBeDisplay is true</p>
<p *ngIf="!shouldBeDisplay">I should be displayed if shouldBeDisplay is false</p>

Now in v4, we can do :

<p *ngIf="shouldBeDisplay; else anotherVar">I should be displayed if shouldBeDisplay is true</p>
<ng-template #anotherVar>
  <p>I should be displayed if shouldBeDisplay is false</p>
</ng-template>

Another example :

<ng-template #loading>Loading...</ng-template>
<div *ngIf="userObservable | async; else loading; let user">
  {{ user.name }}
</div>

Deprecated : Renderer

Now we should use import { Renderer2 } from '@angular/core' instead of import { Renderer } from '@angular/core'

new Renderer has new methods and has better performances. Why not simply replace Renderer ? To maintain old applications which use the deprecated Renderer. It should fully replace Renderer in v5.

New feature : email directive

Before, to check if a mail input is valid, we should have used a pattern with a regex. Now Angular has made an email directive which use that complex pattern.

<input type="email" ngModel name="email" required email>

Deprecated : Animations import

Before, it was imported from @angular/core. Now it's imported from @angular/animation.

New feature : TypeScript 2

• improve speed of compiler
• better type checking

Universal

The majority of the Universal code is now in @angular/platform-server. Take a look in Demo Repository More documentation is forthcoming.

Performances

• decrease file size
• smaller binary