Angular 4 V/S Angular 2


Here in this we are going to explore that what are new features available in Angular 4.

Before going to explore new features of Angular 4 a common question you all will have that after Angular 2 why google has launched Angular 4 and skipped Angular 3.

So answer is that Angular libraries are in single GITHUB repository and versioning is applied in same way for all libraries but only one library¬ @angular/routing has misaligned version.

For e.g.

¬
Angular Library
Version
@angular/core
2.4.0
@angular/compiler
2.4.0
@angular/compiler-cli
2.4.0
@angular/http
2.4.0
@angular/router
3.4.0
¬
¬
As you can see here all other libraries had version 2.4.0 where @angular/router had version 3.4.0.
¬
Due to this misalignment google has decided to skip angular 3 and released angular 4 so it would be easy to maintain.
¬
Angular 4 is not complete rewrite of angular 2 same like angular 1 and angular 2. In case angular 4 google has adapted SEMVER(Semantic version) means there are semantic versioning changes which is required in core libraries of angular.
¬

New features in Angular 4

*ngif

Now in angular we can use else block with if condition.
Angular 2 way
<div>
<h1> Angular 2 </h1>
<h3 ngif="isValid"> Condition is matched</h3>
<h3 ngif="!isValid">Condition is not matched</h3>
</div>
Angular 4 way
<div>
<h1> Angular 4 </h1>
<h3 *ngIf="isValid; else elsepart">Condition matched</h3>
<ng-template #elsepart>
<div>
<h3>Condition is not matched</h3>
</div>
</ng-template>
</div>

Email validation

In angular 2 we need to define regx pattern for validating email address

In angular 4 we need just need to give Email attribute to text box and need to assign type=”Email”.
Angular 2 way
<div>
<h1> Angular 2 - Email Validation </h1>
Email:
<input type="text" id="txtEmail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required />
</div>
Angular 4 way
<div>
<h1> Angular 4 - Email Validation </h1>
Email:
<input type="email" id="txtEmail" required="required" email />
</div>

Renderer2

In angular 2 there is renderer in library @angular/core

In angular 4 we have renderer2 in same library with simple syntax changes.Angular 2 way

import { Component,Renderer } from '@angular/core'; 

@Component({ 
selector:'app-root', 
template:`` 
}) 

export class AppComponent{ 
value=true; 
constructor(private objrend:Renderer){} 

onChangeBackground(ele:HTMLElement){ 
this.objrend.setElementStyle(ele,'background-color','blue'); 
} 
}

Angular 4 way

import { Component,Renderer2 } from '@angular/core'; 
@Component({ 
selector:'app-root', 
template:`` 
}) 
export class AppComponent{ 
isValid=true; 
constructor(private objrend:Renderer2){} 
onChangeBackground(ele:HTMLElement){ 
this.objrend.setStyle(ele,'background-color','blue'); 
} 
}
¬

Animation

In angular 2 animations libraries were available in @angular/core.
¬
In angular 4 libraries for animations are available in separate library @angular/animations.

Other under hood changes

Angular 4 applications are smaller and faster than angular 2 application.

¬
In angular 4 some changes in AOT generated code compilation , These changes reduce code size approx 60% as compare to angular 2.
¬
Hope this will help and you enjoyed reading.
¬
Cheers…!

Written by Mitesh Gadhiya