Angular 4 vs Angular 2 vs 1: The complete list

In this article we compare:

  • Angular 5 vs 4
  • Angular 4 vs 2
  • Angular 2 vs 1 (Angular vs AngularJS)

The newest version of Angular 5 Angular 4 Angular 2 is similar but also very different from the previous version of the framework, AngularJS 1.x. This reference page helps you learn the complete list of differences in the Angular javascript web framework. It includes some code examples of the differences and explanations of how they affect your web development with Angular.

IMPORTANT: At the moment, Angular 4 is the LTS version, LTS means Long-Term Support. The latest stable version of Angular is 5 which will continue to evolve. If you are building web apps or mobile apps using Angular, you will want to use Angular 4 because it will be stable in the long-term. You should be able to reliably build and support your Angular 4 app in the future; Angular 5 is more experimental.

Angular 2 vs 1

Angular 2/4/5+ vs 1

Here’s a giant list of differences and we’re going to explore some of them:

  1. Angular 2 works for more than just JavaScript: it works with TypeScript and Dart too. TypeScript is essentially JavaScript with static typing.
    Angular 4 is geared towards TypeScript mainly; the focus of the documentation is on TypeScript rather than Dart or JavaScript. In Angular 4, TypeScript 2.1 and TypeScript 2.2 are supported which gives better type checking in VS Code.
  2. Core modules are more modular, you can use 3rd party modules more easily (great example is the forms module which was separated from the core angular module)
  3. AngularJS 2 has a new syntax for two-way data binding, uses the “banana in a box” syntax which looks like this: <a [(ngModel)]="linkTitle">
  4. Component-based UI, directives in Angular 1 become components in Angular 2, and controllers simply disappear [1]
  5. Events use a brand new event syntax, parenthesis around events in attributes [1]
  6. Similar to React, properties are passed into components meaning that $scope is removed entirely from AngularJS. In Angular 2 v 1 you will create properties using the @Input decorator/annotation for a component (or directive) [1]
  7. Dependency injection is more explicit with decorators/annotations, you can use @Injectable to declare a class that can be injected into other places, and you can use @Inject to declare that a function is dependent on another class [2]
  8. Forms in Angular 4 are better structured modules and easier than ever with FormBuilder, FormGroup and Validators built-in [2]
  9. Data binding makes implicit references to component variables meaning you can use {{hello}} instead of {{item.hello}} [3]
  10. Filters have been renamed to Pipes [3]
  11. Uses the let keyword to explicitly define template variables (just like JavaScript ES6’s let?) [3]
  12. ng-app has been replaced with Bootstrapping, you explicitly call the bootstrapping method and pass in the module that is the application’s root module, also known as a main entry point [3]
  13. CSS classes can be set based on variable bindings with a convenient syntax, <div []="isActive"> [3]
  14. ng-hide and ng-show directives no longer exist, you can use the “hidden” property binding to show or hide elements, <div [hidden]="isHidden"> [3]
  15. ng-href has been replaced by variable binding, <a [href]="someUrl"> [3]
  16. Router linking is done with the routerLink property, <a [routerLink]="['/some/page']"> [3]
  17. The syntax for using ng-if has changed: *ngIf is the new way to use it [3]
  18. ng-repeat has been replaced with *ngFor [3]
  19. ng-src has been replaced with binding to the src property: <img [src]="imageUrl"> [3]
  20. ng-style can be used with a convenient syntax: <div [style.color]="colorPreference"> [3]
  21. The syntax for ng-switch has changed [3]
  22. The filter and orderBy filters have disappeared for performance reasons; do any filtering and sorting of data within your components instead [3]
  23. The number pipe/filter allows you to set decimal places now and you can use the percent pipe to display percentages data [3]
  24. You can use ES6/ES2015 modules!! No need to wrap your modules in IIFE (immediately invoked function expressions) [3]
  25. Defining a module’s imports/dependencies and what it exports/provides is far more explicit and less confusing [3]
  26. CSS Stylesheets can be linked for specific components using the styleUrls property when defining a component, this makes sure styles aren’t leaking into other components and templates [3]
  27. Zones and zones.js are used to keep track of execution context across multiple asynchronous events, making it far easier to reason about the internals of Angular 2 work in contrast to Angular 1 with its scope, digest and watchers [4]
  28. Unit tests are easier to write in Angular 2 vs 1 because the rendering layer has been separated and they are faster [4]
  29. Mobile web apps are supported with platforms and learn to create mobile/native apps using NativeScript
  30. Bower is no longer needed, everything is installed through NPM (Node Package Manager), or yarn if you’re more adventurous
  31. The HTTP module uses Rx.js for a Reactive data flow, this replaces promises and is great for realtime data retrieval
  32. Reactive programming is used everywhere; it’s used for events, HTTP requests, user input, and more. Data streams replace the $broadcast and $emit and you can create as many data streams as you need
  33. Angular 4 has a new animations package for creating smooth animations that give life and motion to your user interface.

Below you will find more details about some of these items in the list of Angular 2 and Angular 4 vs AngularJS 1 differences.

1. Angular 2, Angular 4 , Angular 5 work for more than just JavaScript

Angular 2 works with three languages:

  1. TypeScript
  2. Dart
  3. Vanilla JavaScript (or ES2015/ES6 compiled with webpack to ES5)

The preferred language, at least judging by the API documentation and tutorials, is TypeScript. TypeScript is a language created by Microsoft that includes type annotations and other features, the language compiles down to JavaScript so that it is compatible with all web browsers. Angular 2+ uses annotations (also known as decorators) in TypeScript to make it simple to define components and other commonly used Angular classes such as NgModule and Directive.

There is an excellent article at Infoq on TypeScript and AngularJS 2.

Special Note: JavaScript ES6 is not the preferred language of Angular 2/4/5+, Reference API Docs are targeted towards TypeScript

You will want to use TypeScript instead of JavaScript/ES6 because the Angular team has decided that the core of the language will be written in TypeScript. This means that the best documentation is for TypeScript and that the tutorials and guides will mainly be written for TypeScript. This is not only true for the official/core Angular modules and reference documentation, it’s also true for community blogs and tutorials. Most of the community is using TypeScript.

Special Note #2: Bower Frontend Dependency Manager Has Been Deprecated

Instead of using Bower to manage frontend dependencies for Angular, the best practice now is to use NPM, the Node Package Manager to install Angular modules and libraries. Bower is used for older AngularJS projects but Bower is not used for Angular 2/4/5+ projects.

4. Component-based UI, directives in Angular 1 become components in Angular 2, and controllers simply disappear

AngularJS 1

In Angular 1 you would use directives and controllers. They worked but weren’t as elegant as they could be. In Angular 2 vs 1 (and in Angular 4) they decided that controllers are redundant and you can use plain old JavaScript classes instead. This removes the need for $scope and simplifies your unit testing code because when you’re testing a controller, you’re just testing a simple class.

Angular 4/5 and Angular 2 vs 1

In Angular 2 vs 1 (and Angular 5), directives still exist but there is a specialized version of them called the component. In the majority of your Angular 2 coding you will be using components rather than directives. Components are a sub-class of directives so when you feel the need to use something more powerful and have a special use case, you can use directives instead. For example, the ngFor and ngIf components are actually directives because they have to hook into the life-cycle of a directive.

5. Events use a brand new event syntax in Angular 2 vs 1, learn it

This was tricky to wrap my head around at first. In Angular 2, when you are binding an event on an HTML element or component, you can use parentheses around the attribute:

<input (blur)="handleBlur()" />

Instead of saying “ng-blur”, you can skip that and use “(blur)”.

25. Defining a module’s imports/dependencies and what it exports/provides is far more explicit and less confusing

In Angular 2 vs 1, the module class ngModule is explicit in defining what it depends on and imports and what it declares for exporting. When you create an ngModule, you will typically be declaring components for export. This allows them to be used in other apps and modules. If you’re writing a module that has a class for API HTTP interaction, your module will depend on the HttpModule (here’s a way to unit test those modules). If you need the angular router, your module will be depending on/importing the RouterModule.

Here’s a more fully-featured example from the Angular 2/4+ API documentation showing what a module declares:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AwesomePipe } from './awesome.pipe';
import { ContactComponent } from './contact.component';
import { ContactService } from './contact.service';
import { HighlightDirective } from './highlight.directive';

 imports: [ CommonModule, FormsModule ],
 declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
 exports: [ ContactComponent ],
 providers: [ ContactService ]
export class ContactModule { }

29. Mobile web apps with platforms and NativeScript

You can create native mobile apps using NativeScript. It interfaces with the Angular framework to produce a native app that is as fast as other native apps. The way it does is is through the power of platforms.

What are platforms? What is the platform browser?

A new feature in Angular 2/4/5+, platforms are interfaces to display and interact with the Angular code. The platform browser is how Angular code is displayed and interacted within the context of a web browser. There are two platform browser options; dynamic platform browser, and platform browser. Dynamic platform browser will compile your Angular code within the browser and then run the web app. The other option, browser platform, relies on you to compile your Angular code which the browser platform will then load and run, it skips the in-browser compilation step entirely resulting in better performance.

The mobile platform lets you display and interact with the Angular app through a mobile native app. The mobile platform is provided by NativeScript.


  1. Angular 2 vs Angular 1 | Object Partners,
  2. Angular 2 vs Angular 1: Key Differences,
  3. Angular 1 to 2 Quick Reference,
  4. AngularJs vs Angular 2 – An In-Depth Comparison,