Here in this we are going to explore what are new features available in Angular 4.
Before going to explore new features of Angular 4 a common question you all will have is that after Angular 2 why google has launched Angular 4 and skipped Angular 3.
So the answer is that Angular libraries are in a single GITHUB repository and versioning is applied in the same way for all libraries but only one library @angular/routing has a 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 a 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 are required in core libraries of angular.
New features in Angular 4
*ngif
Now in angular we can use the else block with if condition.
Angular 2
<div><h1 *ngIf="condition">Condition is matched</h1>
</div>
<div><h1 *ngIf="!condition">Condition is not matched</h1>
</div>Angular 4
<div><h1 *ngIf="condition; else else-block" >True block</h1></div>
<div><ng-template #else-block></div><div>
<h1>else-block</h1>
</div>
<div></ng-template></div>Email validation
In angular 2 we need to define regx pattern(“[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$”) for validating email address
In angular 4 we just need to give an Email attribute to the text box and need to assign type=”Email”.
<div> <input type="email" name="email" required/></div>Renderer2
In angular 2 there is renderer in library @angular/core
In angular 4 we have renderer2 in the same library with simple syntax changes.
Animation
In angular 2 animations libraries were available in @angular/core.
In angular 4 libraries for animations are available in separate libraries @angular/animations.
Other under hood changes
Angular 4 applications are smaller and faster than angular 2 applications.
In angular 4 some changes in AOT generated code compilation , These changes reduce code size approx 60% as compared to angular 2.
Hope this will help and you enjoyed reading.
Cheers…!
