What is Difference Between Angular 2 And Angular 4 ?

In this blog i am going to explain "what is difference between angular 2 and 4",What new features added in angular 4.

Angular 4 contains some additional features over Angular 2.

• Smaller & Faster Apps
• View Engine Size Reduce
• Animation Package
• NgIf and ngFor Improvement
• Template
• NgIf with Else
• Use of AS keyword
• Pipes
• HTTP Request Simplified
• Apps Testing Simplified
• Introduce Meta Tags
• Added some Forms Validators Attributes
• Added Compare Select Options
• Enhancement in Router
• Added Optional Parameter
• Improvement Internationalization

Smaller & Faster Apps

Angular 4 application is smaller and faster in comparison to Angular 2.

View Engine Size Reduced 
There are some changes under the hood to AOT generated code compilation that means Angular 4, hasimproved the compilation time. These changes reduce around 60% of the size in most cases.

Animation Package
Animations now have their own package i.e. @angular/platform-browser/animations

Improvement

Some Improvement on *ngIf and *ngFor.

Stayed Informed

• Angular 2 vs. Angular 1

Template

The template is now ng-template. You should use the “ng-template” tag instead of “template”. Now Angular has its own template tag that is called “ng-template”.

NgIf with Else

Now in Angular 4, it's possible to use an else syntax as,

1. <div *ngIf="user.length > 0; else empty"><h2>Users</h2></div>  
2. <ng-template #empty><h2>No users.</h2></ng-template>  

AS keyword

A new addition to the template syntax is the “as keyword” which is used to simplify the “let” syntax.

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

To subscribe only once to a pipe “|” with “async” and if a user is observable, you can now use it to write

Pipes

Angular 4 introduced a new “titlecase” pipe “|” and uses it  to change the first letter of each word into uppercase.

The example is,

1. <h2>{{ 'anil singh' | titlecase }}</h2>  

Http

Adding search parameters to an “HTTP request” has been simplified as,

1. //Angular 4 -  
2. http.get(`${baseUrl}/api/users`, {  
3.     params: {  
4.         sort: 'ascending'  
5.     }  
6. });  
7. //Angular 2-  
8. const params = new URLSearchParams();  
9. params.append('sort', 'ascending');  
10. http.get(`${baseUrl}/api/users`, {  
11.     search: params  
12. });  

Test
In Angular 4, overriding a template in a test has also been simplified as,

1. //Angular 4 -  
2. TestBed.overrideTemplate(UsersComponent, '<h2>{{users.name}}</h2>');  
3. //Angular 2 -  
4. TestBed.overrideComponent(UsersComponent, {  
5.     set: {  
6.         template: '<h2>{{users.name}}</h2>'  
7.     }  
8. });  

Service
A new service has been introduced to easily get or update “Meta Tags” i.e.

1. @Component({  
2.     selector: 'users-app',  
3.     template: `<h1>Users</h1>`  
4. })  
5. export class UsersAppComponent {  
6.     constructor(meta: Meta) {  
7.         meta.addTag({  
8.             name: 'Blogger',  
9.             content: 'Anil Singh'  
10.         });  
11.     }  
12. }  

Forms Validators

One new validator joins the existing “required”, “minLength”, “maxLength” and “pattern”. An email helps you validate that the input is a valid email.

Compare Select Options

A new “compareWith” directive has been added and it used to help you compare options from a selection.

1. <select [compareWith]="byUId" [(ngModel)]="selectedUsers">  
2.     <option *ngFor="let user of users" [ngValue]="user.UId">{{user.name}}</option>  
3. </select>  

Router

A new interface “paramMap” and “queryParamMap” has been added and it was introduced to represent the parameters of a URL.

1. const uid = this.route.snapshot.paramMap.get('UId');  
2. this.userService.get(uid).subscribe(user => this.name = name);  

CanDeactivate

This “CanDeactivate” interface now has an extra (optional) parameter and it contains the next state.

I18n 
The internationalization is a tiny improvement.

1. //Angular 4-  
2. <div [ngPlural]="value">  
3.     <ng-template ngPluralCase="0">there is nothing</ng-template>  
4.     <ng-template ngPluralCase="1">there is one</ng-template>  
5. </div>  
6.    
7. //Angular 2-  
8. <div [ngPlural]="value">  
9.     <ng-template ngPluralCase="=0">there is nothing</ng-template>  
10.     <ng-template ngPluralCase="=1">there is one</ng-template>  
11. </div>  

You have just read an article that categorized by title AngularJs 2 / Interview Question by title What is Difference Between Angular 2 And Angular 4 ?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2017/07/what-is-difference-between-angular-2.html. Thank You!

Author: Bikesh Srivastava - Thursday, July 20, 2017