what’s new in Angular 4.x!!!!

Hello readers,

To Start with anything about angular 4.x, I would like to quote one statement Angular 4 is NOT a complete re-write of Angular 2!”

With release of angular 4.0.0 this March, 2017. If you, as a developer think that you need to learn the whole thing again like what was happened with angular js 1.x to angular2 (i.e. just happened because angular2 is complete rewrite of angular js 1.x) It is not the same in the case of angular 4 because it is not the complete rewrite to angular2 ,it is simply  a change in some core libraries that demands the semantic versioning change. The term “angular2” will deprecate soon, once the versions 4,5, and so on will be released.

It is just an “angular”, which should not be used with version suffix.

Indeed, it doesn’t introduce any changes which break your code. It deprecates some features (i.e. those features are still usable but will be removed with next version of Angular) and adds some new ones.

why it is angular 4 and why not angular3?

“Why Kattapa killed Bahubali?” (A very famous question for year 2016-2017 from a very famous Indian movie Bahubali). With the same level of curiosity one would like to know why it is angular4 and why not angular3? Well the answer is

  • As I said previously they want it as just “Angular”, which should not be used with version suffix.
  • The core angular libraries lives in one single github repository, all of them are versioned the same way, but distributed as different NPM.angular2-versions.pngDue to this misalignment of the router package’s version, the team decided to go straight for angular v4. In this way all core package will be aligned and which will be easier to maintain for future release.
  • Following are the tentative schedule for further release.angular-releases.png

How to Update angular-cli?

run the following command to your terminal and command prompt.

[sudo] npm uninstall -g @angular/cli or angular-cli

npm cache clean

[sudo] npm install -g @angular/cli

sudo is only required for [mac/linux user]

Is there any new features?

  • *ngIf : now we can use else part with *ngif as shown below.
<div>
<div>
<h1>Older Way to write if else in anuglar2</h1>
</div>
<div><button (click)="value=!value">Toggel Button</button></div>
<div><h1 *ngIf="value" >shows if value is true</h1>
</div>
<div><h1 *ngIf="!value" >shows if value is false</h1>
</div>
<div>
<h1>New Way to write if else in angular4.x</h1>
</div>
<div>

but that doesn't mean older way will not work.</div>
<div>It still can work with new version of angular but that will deprecate soon</div>
<div><button (click)="value=!value">Toggel Button</button></div>
<div><h1 *ngIf="value; else falseBlock" >True block</h1>
</div>
<div><ng-template #falseBlock></div>
<div>
<h1>false Block</h1>
</div>
<div></ng-template></div>
</div>
  • Renderer2: earlier it is only Renderer imported from @angular/core, now it is Renderer2 also got imported from @angular/core.

Earlier Way:


import { Component,Renderer } from '@angular/core';
@Component({
selector:'app-root',
template:``
})
export class AppComponent{
value=true;
constructor(private renderer:Renderer){
}
onChangeBackground(element:HTMLElement){
this.renderer.setElementStyle(element,'background-color','blue');
}
}

New Way:

import { Component,Renderer2 } from '@angular/core';
@Component({
selector:'app-root',
template:``
})
export class AppComponent{
value=true;
constructor(private renderer:Renderer2){
}
onChangeBackground(element:HTMLElement){
this.renderer.setStyle(element,'background-color','blue');
}
}
 
  • Email Validater: Earlier we can use pattern validater to validate email address now we can simply use email as validater with new version.

Earlier Way:

<div>
<input type="email" name="email" required]
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" /></div>

New Way:

<div>
<input type="email" name="email" required
email /></div>

What is Deprecated?

  • Animation package is deprecated as earlier we are importing it from @angular/core now it can be imported from @angular/animations

Example Earlier Import Statement

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

Example New Import Statement


import { Component,Renderer2 } from '@angular/core';
import { animate,state,style,transition,trigger } from '@angular/animations';</div>

That is another deprecation we have and with that the other new features and only under the hood changes which shouldn’t affect your code that is angular4 for you. So as you see it, for you as a developer not that many important changes which affect your code ,nice changes which should affect your performance and size of  your application.

Now angular4.x works with Typescript 2.x and above ,you can find the details about typescript release here.

  Key take away:

  • Your app should continue to work.
  • You don’t need to change anything if you don’t want to
  • You can use new feature like rendere2 and ngif
  • For angular4 you don’t need upgrade compulsory if you don’t want to.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s