Angular 2 vs Angular 4 – 5 Minutes WalkThrough

Hey Techies, today we will go through the difference between Angular 2 and Angular 4. (i.e. Angular 2 vs Angular 4)

In the world of web development, Angular is considered as a King of JavaScript frameworks as Google has always been behind the scene.

Recently, the Angular team has released the version 4 in Mar’17.

Although, the new version doesn’t have drastic change what we’ve seen at the time of Angular 2 release.

Why not Angular 3?

Due to some version conflictions and misalignment of the router package’s version, the angular team has decided to skipp version 3 and released the version 4.

Of course, we’re not going deep on that.

Let’s dig into Angular 2 vs Angular 4

First of all, Angular 1 was for JavaScript developers and Angular 2 for TypeScript developers.

Angular 4 also uses the TypeScript but they have increased the compatibility to justify the version upgradation in terms of performance only.

1. Faster and Smaller

Angular 4 has been reduced to the size of overall bundle of the project.

And Of course, size always matters and based on the reduced size, the application performs faster than previous state.

And they will do the further improvements in the upcoming months.

2. TypeScript 2.1 & 2.2 compatibility

Angular team has upgrade the compatibility of TypeScript that will increase the perfomance overall.

3. Animation

Now, Angular 4 provides own Animation module that can be easily added by importing a module from animations library.

See below, for further info.

Was in Angular 2

import {trigger, style, transition} from @angular/transitions

Now, in Angular 4

//Import from Animations
import {BrowserAnimationsModule} from @angular/platform-browser/animations

@NgModule({
  imports: [BrowserAnimationsModule]
})

4. Improved *ngIf and *ngFor

Now, the template binding syntax supports a couple interesting changes.

You can now use an if/else style syntax, and assign a local/reference variable.

Here, I’ve used #loading variable for executing else condition.

<div *ngIf="userList | async as users; else loading">
<users-component> *ngFor="let user of users; count as count" [user]="user">
</users-component>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading…</ng-template>

For further examples, visit, Basics of Angular 4

5. A new ng-template tag introduced

A new ng-template tag to have multi lines HTML collection inside.

In addition, ng-template is also a new feature of Angular 4 that support multiple lines can be included as an HTML in

ng-template is the new tag provided in Angular 4 to replace the template tag, and a template tag is now deprecated.

6. Changed in validations

In angular 2, we had to use pattern for email validation.

Now in angular 4, we just need to use email as an attribute to apply email validations.

Suggested visit, Build Your First Angular 4 Form

7. Pipe for titlecase filter

Angular 4 has introduced a new filter titlecase pipe to change the first letter of each word into uppercase.

{{"angular 2 vs angular 4"| titlecase }}

It will display as “Angular 2 Vs Angular 4”.

8. New search parameters to a HTTP request

Angular 4 has added new parameters for search, as below.

Was in Angular 2

const params = new URLSearchParams();
params.append('sort','ascending');
http.get('${baseUrl}/api/service', {search : params })

Is in Angular 4

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

9. A new Meta Tag service introduced

Angular 4 introduced a new service to easily get or update “Meta Tags”

@Component({
    selector: 'users-app',
    template: `<h1>Users</h1>`
})
export class UsersAppComponent {
    constructor(meta: Meta) {
        meta.addTag({ name: 'Mohit Tanwani', content: 'The Techies House' });
    }
}

Conclusion

Furthermore, due to the upgradation in the version may confuse the community about what should they start learning. I would suggest going with Angular 4 as this upgradation is the regular process in IT industry. So, don’t worry, just jump into the Angular 4.

If you would like to learn Angular 4 from scratch, you can visit, Build Your First Angular 4 App

Moreover, It would be easy for the people to start copping up with Angular 4 if they know Angular 2.

On the other side, it would be difficult for the people who have just jumped into the AngularJs or JavaScript.

I would keep updating you on the latest Angular features, stay tuned!

Still, you want to dig more, visit,

Would you like to share other/missed features of Angular 4? Drop your comments below.

Mohit Tanwani

Mohit Tanwani is an enthusiast Techie, a blogger, and IT geek. He has been crazily involved in the industry for 5 years.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of