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.
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.
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
Animations now have their own package i.e. @angular/platform-browser/animations
Improvement
Some Improvement on *ngIf and *ngFor.
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”.
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,
Now in Angular 4, it's possible to use an else syntax as,
- <div *ngIf="user.length > 0; else empty"><h2>Users</h2></div>
- <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.
A new addition to the template syntax is the “as keyword” which is used to simplify the “let” syntax.
- <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.
Angular 4 introduced a new “titlecase” pipe “|” and uses it to change the first letter of each word into uppercase.
The example is,
- <h2>{{ 'anil singh' | titlecase }}</h2>
Http
Adding search parameters to an “HTTP request” has been simplified as,
Adding search parameters to an “HTTP request” has been simplified as,
- //Angular 4 -
- http.get(`${baseUrl}/api/users`, {
- params: {
- sort: 'ascending'
- }
- });
- //Angular 2-
- const params = new URLSearchParams();
- params.append('sort', 'ascending');
- http.get(`${baseUrl}/api/users`, {
- search: params
- });
Test
In Angular 4, overriding a template in a test has also been simplified as,
In Angular 4, overriding a template in a test has also been simplified as,
- //Angular 4 -
- TestBed.overrideTemplate(UsersComponent, '<h2>{{users.name}}</h2>');
- //Angular 2 -
- TestBed.overrideComponent(UsersComponent, {
- set: {
- template: '<h2>{{users.name}}</h2>'
- }
- });
Service
A new service has been introduced to easily get or update “Meta Tags” i.e.
A new service has been introduced to easily get or update “Meta Tags” i.e.
- @Component({
- selector: 'users-app',
- template: `<h1>Users</h1>`
- })
- export class UsersAppComponent {
- constructor(meta: Meta) {
- meta.addTag({
- name: 'Blogger',
- content: 'Anil Singh'
- });
- }
- }
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.
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.
A new “compareWith” directive has been added and it used to help you compare options from a selection.
- <select [compareWith]="byUId" [(ngModel)]="selectedUsers">
- <option *ngFor="let user of users" [ngValue]="user.UId">{{user.name}}</option>
- </select>
Router
A new interface “paramMap” and “queryParamMap” has been added and it was introduced to represent the parameters of a URL.
A new interface “paramMap” and “queryParamMap” has been added and it was introduced to represent the parameters of a URL.
- const uid = this.route.snapshot.paramMap.get('UId');
- 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.
This “CanDeactivate” interface now has an extra (optional) parameter and it contains the next state.
I18n
The internationalization is a tiny improvement.
The internationalization is a tiny improvement.
- //Angular 4-
- <div [ngPlural]="value">
- <ng-template ngPluralCase="0">there is nothing</ng-template>
- <ng-template ngPluralCase="1">there is one</ng-template>
- </div>
- //Angular 2-
- <div [ngPlural]="value">
- <ng-template ngPluralCase="=0">there is nothing</ng-template>
- <ng-template ngPluralCase="=1">there is one</ng-template>
- </div>
Bikesh Srivastava
AngularJs 2,
Interview Question
The .NET Framework
