Angular v2 vs Angular v4

ngular is developed by Google and is considered as one of the best open-source JavaScript frameworks.

What was new in angular v2?

Some of the big changes that were made in angular 2.x are:

1. Angular 2 was focused on the development of mobile apps.
2. Numerous modules like controllers and $scope were eliminated from angular core leading to performance improvement.
3. AtScript was used to develop Angular 2.x.

Where is Angular 3?

You all might be wondering where is Angular 3? Actually, Google planned to skip the angular 3 because of misalignment in router package version. 

As angular/router was already using package version 3.x. So instead of keeping packages as 3.0 and router to 4.0 google decided to switch directly to Angular 4 making all package consistent.

Don't worry Angular 4 is not a complete rewrite of Angular 2. Your angular 2 apps can easily be upgraded to angular 4 apps without breaking any changes ( Personally I haven't seen anything breaking when upgrading to angular 4. Please let me know in comment section if you find anything breaking)

Changes in Angular 4

Some of the changes that were there in angular 4 are as shown below:

1. AOT (Ahead of time) - view engine
2. ngIf
3. as keyword
4. New pipe introduced
5. HTTP
6. Meta
7. Email validator
8. Angular animation package

AOT (Ahead of time) - view engine

This is one of the changes which will reduce bugs and increase performance. As a developer, you won't notice it.

Advantages of AOT:

1. It pops out error if template is not correct at build time rather than at runtime
2. We don't need to ship angular compiler to user, so app size will be smaller

The project earlier was maintained by the community, but now its angular team who has taken responsibility.

ngIf

In angular 2 if we want to write else if in `ng if` then we need to write i a way as shown below:

<p *ngIf="IsContent">My content</p>

<p *ngIf="!IsContent">Not my content</p>

But now in angular 4 we simply write above two statement as:

<p *ngIf="IsContent; else elsePart">My content</p>

<ng-template #elsePart>

<p>Not my content</p>

</ng-template>

Looks complicated, but its really easy and make sense when you get hands on to it.

as keyword

It allows storing a result in a variable of the template, to use it in the element.

<div *ngFor="let tech of techies | slice:0:2 as total; index as i"> {{i+1}}/{{total.length}}: {{tech.name}} </div>

pipes

Angular 4 introduced a new titlecase pipe. It will change the first letter of each word to uppercase:

<p>{{'angular is fun | titlecase'}}</p>

Output:

Angular Is Fun

HTTP

Adding search parameters to an HTTP request has been simplified:

http.get(`${baseUrl}/api/races`, { params: { sort: 'ascending' } });

Previously, we have to do it in a way shown below:

const params= new URLSearchParams();

params.append('sort', 'ascending');

http.get(`${baseUrl}/api/races`, { search: params });

Meta

A new service has been introduced to easily get or update meta tags:

@Component({ 
       selector: 'ponyracer-app', 
       template: `<h1>PonyRacer</h1>` 
}) 

export class PonyRacerAppComponent { 
           constructor(meta: Meta) { 
               meta.addTag({ name: 'author', content: 'Ninja Squad' }); 
           } 
}

Renderer

The renderer has been changed to renderer 2. In angular 2 we have renderer as shown below:

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

@Component({
selector: 'app-root',
templateUrl: '/app.component.html'
})

export class AppComponent {
     constructor(private renderer: Renderer) {}
     
     onChangeBackground(element: HTMLElement) {
                this.renderer.setStyle('background-color': 'green');
     }

}

But in angular 4 we have new renderer as renderer2. Refer the code shown below:

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

@Component({
   selector: 'app-root',
   templateUrl: '/app.component.html'
})

export class AppComponent {

      constructor(private renderer: Renderer2) {}

      onChangeBackground(element: HTMLElement) {
            this.renderer.setStyle('background-color': 'green');
      }
}

Renderer will still work in angular 4, the change was there because under the hood lot has changed.

Email validator

In angular 2 if have email and we need to validate it, we use a pattern but now in angular 4 we can validate email using code shown below:

<input type="email" name="email" ngModel email>

Other changes are under the hood like:

1. Now we can use typeScript 2, but before that only typescript 1.8 is supported. (There are lot more new features in typescript 2 that we can explore in upcoming tutorial)

Angular animations

Now we have a new package of animation.

Earlier in angular 2.x we used to import :

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

and now with angular 4:

import {animate, state, style, transition, trigger} from '@angular/animations';

And also now we need to import a new module in our app.module file known as BrowserAnimationsModule under imports.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

The old animations is depreciated (but it will still work). I would suggest you to upgrade your animations module if you are using any.

With angular 4 obviously, you will observe that performance and size of the code have improved drastically. There are some more changes that angular has done. But I have tried to cover all the major changes that as a developer we should know.

Please let me know if you have any questions in comment section below.