What's New In Angular 4.0

Introduction

In this article, I will explain what the new changes that come with Angular 4.0 are. AngularJS is one of the most poupular JavaScript frameworks to create Web apps. It is maintained by Google. 

 

What's new in AngularJs 4.0?

One of the most important things is that Angular 4.0 doesn't change that much. In Angular 4.0, some under the hood changes, some improvements, and performance improvements have been done. According to Angular change-log the "Angular 4.0 release is backwards compatible and will work with your existing code, but you may have use cases they haven’t anticipated" 

 

Let's see what are the new changes made in Angular 4.0. 

ngIf, 

In Angular 2.0, if we wanted to use ngIf with multiple conditions or specifically with else, we write, as shown below.

In Angular 2.0

<button (click)="showPara=!showPara">Show and Hide Paragraph</button>

<p *ngIf="showPara">This time show paragraph value is true</p>
<p *ngIf="!showPara">This time show paragraph value is false</p>

Output


In Angular 4.0 

NgIf syntax has been extended to support the else clause to display the template when the condition is false. In addition, the condition value can now be stored in local variable for later reuse. This is especially useful when used with the async pipe. 

Example

<button (click)="showPara=!showPara">Show and Hide Paragraph</button>

<p *ngIf="showPara;else hidePara">This time show paragraph value is true</p>
<ng-template #hidePara>
  <p>This time show paragraph value is false</p>
</ng-template>

Its output will be same, as given above. 

You can also store the value in a local variable and later you can use it. 

<div *ngIf="employeeObservable | async; else loading; let emp">
  Hello {{emp.first}} {{emp.last}}!
</div>
<template #loading>Waiting...</template>

There is one more part, which is added that is "then". We can check the condition and using then, we can show different templates. The syntax is given below. 

<div *ngIf="condition; then thenBlock else elseBlock"> ... </div>
<template #thenBlock>Then template</template>
<template #elseBlock>Else template</template>

Email Validator

In Angular 2.0, we use an email validator, using pattern option. We provided an email pattern in pattern attribute and then we check whether the form is valid or not but in Angular 4.0, there is a validator to validate an email.

In Angular 2.0

<form #frm="ngForm">
<label>Email</label>
        <input
            type="email"
            ngModel
            name="email"
            required
            style="width:300px"
            pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"/>
            <button [disabled]=!frm.valid>Submit</button>
</form>

Output

 
In Angular 4.0

We can use an email Directive, which is shown below.

<form #frm="ngForm">
<label>Email</label>
        <input
            type="email"
            ngModel
            name="email"
            required
            style="width:300px"
            email/>
            <button [disabled]=!frm.valid>Submit</button>
</form>

Its output will be the same as given above.

 

Pattern validator is still there, so if you want to use it, then you can use it for other types of validation.

Renderer2

We have renderer in Angular 2.0 and we use it as shown below. 

In Angular 2.0

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private renderer:Renderer){}

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

On HTML page, we use this, which is shown below.

<button (click)="onChangeBackground(ourElement)">Click Me</button>
<h1 #ourElement>Hello</h1>

Output


In Angular 4.0

Old renderer is deprecated and in Angular 4.0, we have renderer2. We use renderer in Angular 4.0, which is shown below. 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private renderer:Renderer2){}

  onChangeBackground(element:HTMLElement){
    this.renderer.setStyle(element,'background-color','#000');
    this.renderer.setStyle(element,'color','#fff');
  }
}

The output will be the same as you have seen above. 

Angular 4.0 Supports TypeScript 2.0

Angular 2.0 supports Typescript 1 but Angular 4.0 is compitable with Typescript 2.1 and 2.2.

Animation Package

According to Angular 4.0 Blog, Angular 4.0 have pulled the animations out of @angular/core and into their own package. This means that if we don’t use animations, this extra code will not end up in our production bundles. This change also allows us to more easily find the documentation and to take better advantage of autocompletion.

"Now, how can we add Animation?"

We can add animations ourself to our main NgModule by importing BrowserAnimationsModule from @angular/platform-Browser/animations.

I will describe more about this point in my upcoming article.

Smaller and faster

In this release, Angular 4.0 delivers an Application, which is smaller and faster. 

View Engine changes

Under the hood, some changes have been done in AOT generated code.