Post
Ask Question

Angular 4.0 Kickstarter

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 the 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 has happened with Angular js 1.x to Angular 2 (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 of Angular2 ,it is simply a change in some core libraries, which demands the semantic versioning change. The term “Angular 2” 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 change which breaks your code. It deprecates some features (i.e. those features are still usable but will be removed with the next version of Angular) and adds some new ones.

why it is Angular 4 and why not Angular 3?

“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 Angular 4 and why not Angular 3? 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.

    Angular

Due to this misalignment of the router package’s version, the team decided to go straight for Angular v4. In this way, all core package are aligned, which are easy to maintain for future release.

After Angular 4.x release, following is the tentative schedule for the further release.

Angular.

How to Update Angular-cli?

[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]

Are there any new features?

  • *ngIf
    Now, we can use else part with *ngif, as shown below.
    1. [code language=”html”]  
    2. <button (click)="value=!value">Toggel Button</button>  
    3.   
    4. <h1 *ngIf="value" >shows if value is true</h1>  
    5. <h1 *ngIf="!value" >shows if value is false</h1>  
    6.   
    7. <h1>New Way to write if else in angular4.x</h1>  
    8. <p>but that doesn't mean older way will not work.   
    9. It still can work with new version of angular but that will deprecate soon</p>  
    10. <button (click)="value=!value">Toggel Button</button>  
    11.   
    12. <h1 *ngIf="value; else falseBlock" >True block</h1>  
    13. <ng-template #falseBlock>  
    14. <h1>false Block</h1>  
    15. </ng-template>  
    16.   
    17. [/code]  
  • Renderer2
    Earlier, it is only Renderer, which is imported from @angular/core, now it is Renderer2 also got imported from @angular/core.

Earlier way 

  1. [code language=”typescript”]  
  2. import { Component,Renderer } from '@angular/core';  
  3.   
  4. @Component({  
  5.     selector:'app-root',  
  6.     templateUrl:'./app.component.html'  
  7.   
  8. })  
  9. export class AppComponent{  
  10.     value=true;  
  11.     constructor(private renderer:Renderer){  
  12.   
  13.     }  
  14.     onChangeBackground(element:HTMLElement){  
  15.         this.renderer.setElementStyle(element,'background-color','blue');  
  16.   
  17.     }  
  18. }  
  19.   
  20. [/code]   

New way 

  1. [code language=”typescript”]  
  2.   
  3. import { Component,Renderer2 } from '@angular/core';  
  4.   
  5. @Component({  
  6.     selector:'app-root',  
  7.     template:``  
  8.   
  9. })  
  10. export class AppComponent{  
  11.     value=true;  
  12.     constructor(private renderer:Renderer2){  
  13.   
  14.     }  
  15.     onChangeBackground(element:HTMLElement){  
  16.         this.renderer.setStyle(element,'background-color','blue');  
  17.   
  18.     }  
  19. }  
  20.   
  21. [/code]   
Email validater

Earlier, we can use pattern validater to validate an email address. Now, we can simply use an email as a validater with the new version.

Earlier way 

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

New way

  1. [code language=”html”]  
  2.   
  3. <input type="email" name="email" required   
  4. email />  
  5.   
  6. [/code]  

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

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

New import statement

  1. import { Component,Renderer2 } from '@angular/core';  
  2. import { animate,state,style,transition,trigger } from '@angular/animations';  

As you see it, for you; as a developer; there are not many important changes, which should affect your performance, size of your Application and code.

Now, Angular4.x works with Typescript 2.x and above. You can find the details about TypeScript release.(https://github.com/Microsoft/TypeScript/releases )

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 Angular 4, you don’t need an upgrade compulsorily.


Similar Articles