Sunday, September 26, 2021

Angular 2: Features & Enhancements

AngularJS has long been a popular JavaScript framework. Since the time it was introduced, it has seen phenomenal growth as far as usage, community support and popularity is concerned. Angular 2 was introduced in the fall of 2015 and it is a rewrite of the earlier version of the framework accompanied by some helpful updates. This article presents a discussion of the new features and enhancements in Angular 2, its salient enhancements and why we should use it.

Why Angular 2?

Let us now understand the concerns that Angular 2 wanted to address. First off, Angular 2 is high performance — it minimizes the load time of your pages. This section lists the changes that Angular 2 has brought in over its earlier counterparts.

TypeScript: Angular 2 uses TypeScript heavily. Incidentally, TypeScript is a statically typed language like C# and is essentially a superset of JavaScript. This is one of the most striking changes in Angular 2 if you compare this with earlier versions. TypeScript has gained a lot of popularity primarily because of its simplicity and ease of use. As TypeScript is from Microsoft, Angular 2 has become widely popular amongst the Microsoft community as well. For your information, frameworks like ReactJS also uses TypeScript.

Mobile development: Regardless of the fact that Angular 1.x was meant for responsive application development, there wasn’t any mobile support. However, you could take advantage of some libraries to run Angular 1.x on mobile. On the other hand, Angular 2 has built-in support for mobile application development. Note that Angular 2 renders code differently for Web browsers and mobile browsers.

Performance: Performance in Angular 2 is much improved — thanks to the support for offline compilation and fast change detection. The support for dynamic loading and asynchronous templating are features that help in improving the page load and response times considerably. Module loader is also much simplified in Angular 2. You can now use System.js as the universal loader to load the ES6 modules.

Directives: Angular 2 provides support for three types of directives. These are component directives, decorator directives and template directives.

Improved Dependency Injection: Dependency Injection is a software design principle that helps to abstract the dependencies of an object outside of it and make such objects loosely coupled with each other. Angular 2 has improved support for dependency injection. Modular development and component isolation are features that make dependency injection simple and easy to use and implement in Angular 2.

Improved data binding: Data binding in Angular 2 is much improved. To bind data to a DOM element, all you have to do is just wrap the element inside a square bracket as shown in the code snippet below.

<img [src]="test.gif">

Support for a component-based architecture: Unlike its earlier versions, Angular 2 is completely component based. With Angular 2, you would just use components and directives — controllers and $scope are no longer used. Well, what are components anyway? A component is a controller class that is associated with a template. Here’s how a component in Angular 2 looks like.

  selector: 'test-component',
  template: `<div>Hi! This is just a test</div>`
class TestComponent {
//Usual code

Cross-platform: You can build and run Angular 2 applications on desktops, Android and iOS systems.

Browser support: Angular 2 supports most of the modern-day browsers. These include: IE 9, 10, 11, Firefox, Chrome, Safari, Android 4.1 and Microsoft Edge

Improved routing: Routing in Angular 2 is much improved — thanks to URL resolver, location service, navigational model, etc.


Angular is one of the most popular open source JavaScript frameworks. In this article, we examined the new features and enhancements in Angular 2. Happy reading!

Suggested Reading

Popular Articles