Difference between Angular 2 & Angular 4 (What's New) 2017

Angular 4 doesn't change that much as compare to Angular 2. They have deprecated some old features and added some new however Angular 4 shouldn't have any breaking changes. We can still use deprecated features as it is deprecated not removed but for safe side if possible use Angular 4 as in future it will be removed completely.

So many people was confused even I that why Angular 4 and why not Angular 3? It's not so complicated, the reason I found like because of their internal versioning conflicts they skipped Angular 3 and moved on Angular 4.

Change 1: They have changed *ngif conditional pattern and made it very clear If Else pattern.

See example below:

Angular 2:*ngIf (Depricated):

<div *ngIf="showText">If part to display text</div>
<div *ngIf="!showText">Else part to display text</div>

Angular 4:*ngIf (New):

<div *ngIf="showText; else elsePart">If part to display text</div>
<ng-template #elsePart>
<p>Else part to display text</p>
</ng-template>


Change 2: "Renderer" class changed to "Renderer2"

See example below:

Angular 2:Renderer (Depricated):

import {Component, Renderer} from '@angular/core'
export Class Add Component {
showText = true;
constructor (private renderer : Renderer ){}

onChangeBackground (element:HTMLElement){
this.renderer.setElementStyle(element,'background-color','red');
}
}

Angular 4:Renderer2 (New):

import {Component, Renderer2} from '@angular/core'
export Class Add Component {
showText = true;
constructor (private renderer : Renderer2 ){}

onChangeBackground (element:HTMLElement){
this.renderer.setElementStyle(element,'background-color','red');
}
}

New features By Angular 4:

Feature 1: Added new Email validation class so it replaced the regular expression pattern.

See example below:

Angular 2:Email pattren (Depricated):
<form #f="ngForm">
<input type="email" pattern="[a-z0-9!#$..........etc]" />
</form>

Angular 4:Email class (New):
<form #f="ngForm">
<input type="email" email />
</form>

Feature 2: Using updated Type Script version 2.2

Feature 3: Added seperate Animation package.

See example below:

Angular 2: Extends from core class:

import {
animate,state,style,transition,trigger 
} from '@angular/core';

Angular 4:Extends from seperate animation class:

import {
animate,state,style,transition,trigger 
} from '@angular/animations';


Please comments if you have any queries. Thanks!

Note: The above examples are just samples. You need to check syntax and find where exactly put this code.