Angular 2 – what’s new?


In December 2015 the beta version of the second Angular framework was announced so we are really close to the final release. It’s likely you have already heard that Angular 2 will be completely reinvented and will provide an immense amount of breaking changes in comparison to the previous versions of the framework. If you haven’t already looked at how it’s changed, I will try to show you roughly what we should expect.

Goodbye $scope object…

…and please welcome components! Yes, you didn’t hear wrong – the Angular 2 team changed completely the way we create an application: no more angular.module(), no more controllers and no more $scope object! If you are familiar with ReactJS, it’s more probable you will understand the new Angular 2 approach more easily.

Another important difference is that we will be forced to use ES6 because these new components are just new JavaScript classes (of course, if you are a masochist, you can avoid using a ES6 transpiller and write everything on your own in plain ES5 JS).

And last but not least: if you think that ES6 means Babel in this case, you are wrong! Angular 2 is strongly tied with Microsoft’s TypeScript which has it’s own transpiller so we are persuaded to use both technologies together… I personally don’t like it – in my opinion, the main power of JavaScript is that it has no static typing which makes it extremely flexible and efficient (I hope there is a way to use Angular 2 without TypeScript – I will write a post about it when I find a solution for that). By the way, this must be an agreement between Google and Microsoft – it’s a win-win situation for both companies because I expect that Angular 2 will be the advised front-end framework for ASP.NET MVC projects while TypeScript will gain bigger popularity in the community…

Let’s see the code of an Angular 2 component

Ok, after a long introduction, it’s time to see how a typical component in Angular 2 will look. Please see an example:

import { Component } from 'angular2/core';
import { DirectiveComponent } from './directive.component';
import { AppService } from './app.service';

    selector: 'my-app',
    templateUrl: 'app/app.template.html',
    styleUrls: [ 'app/app.styles.css' ],
    directives: [ DirectiveComponent ],
    providers: [ AppService ]
export class AppComponent {
    constructor(private appService: AppService) { }

    public message = 'Hello from component!';
    public nameList = this.appService.getNames();

Ok, at the beggining of the component we have several imports. The most significant is the first one: Component. We can use this import as a decorator for the component represented by the class AppComponent. Actually, it seems like we will use a lot of such decorators in Angular 2 – this way we can configure all aspects of the component. In the example above, we assign a handful of settings to the component by using this decorator but only the selector property is required – it tells Angular 2 that the AppComponent should be mounted into the my-app element in the DOM. Using templateUrl and styleUrls we can link the component together with the html template and CSS styles. Instead of supplying them as files, we can also provide them inline here. At the end, we are providing directives and providers (services) used by the component (I will write about that later).

Now let’s talk about the component. First we have a constructor but I will skip it for the moment and return to it later. After the constructor we can see two public properties: the message and the nameList. Public properties of the component class in Angular 2 can be considered as properties added to the $scope object in previous versions of Angular so we can bind them to the view – let’s check the content of the template file assigned previously to the templateUrl property of the decorator:

<h1>Two way binding:</h1>
<label for="new-message">Type: message</label>
<input type="text" [(ngModel)]="message" id="new-message" />

    <li *ngFor="#item of nameList">


You may notice that the template looks very similar to the ones we know already from previous versions of the framework. We can use a {{}} statement to bind data in a read-only way and a [(ngModel)] attribute (this has changed a little bit) to bind data to the input element and make it writeable.

We can also iterate through the list in a very similar way – please see the *ngFor attribute.


At the end of the sample template we can see a custom HTML element custom-directive. This is a placeholder for the directive, which is actually a component too:

import { Component } from 'angular2/core';

    selector: 'custom-directive',
    templateUrl: 'app/directive.template.html'
export class DirectiveComponent {
    public message: 'Hello from directive!';

As you can see, it’s just a component with it’s own template and selector configured in the decorator so basically, in the new Angular, we won’t deal with Directives any more. From now on we will build an app only using small components (this may remind you of ReactJS). If we want to make it work, we have to just tell the parent component that it should load the child. We did that before in the parent’s decorator:

directives: [ DirectiveComponent ],


The last thing I want to show you today are services – they are actually acting like before and are just simple classes:

import { Injectable } from 'angular2/core'

export class AppService {
    getNames() {
        return [
            { name: 'Bob' },
            { name: 'Martynka' },
            { name: 'George' }

What is interesting here is that we use another decorator called Injectable. Actually this just forces TypeScript to emit appropriate metadata during transpillation which may be needed to inject other dependecies to this service.

Again, to make it work we have to inform the component that it should use this service. We did that in the decorator of this component (please see the first example in this post):

providers: [ AppService ]

But that’s not all. To use this service we have to inject it into the component. I did that in the constructor:

constructor(private appService: AppService) {

The code above is specific to TypeScript – it creates a private property appService of AppService type.


One more thing at the end because I haven’t mentioned how to bootstrap the whole application. So, of course, we have to have an index.html file which contains an element provided in the selector property of the main component. In the Angular 2 app we will usually have a separate file called e.g. boot.ts which will be attached in the index.html. The content of this file will be simple:

import { bootstrap } from 'angular2/platform/browser'
import { AppComponent } from './app.component'


So we just import the main component and the bootstrap function. Then we just call the function passing the component to it and this will instantiate the component and prepare everything to lauch the app in the browser.

Please note that we import the bootstrap function from `angular2/platform/browser’. This suggests that this way of bootstrapping is intended for a browser environment. That’s true, however, Angular 2 can also be loaded on other environments. To do so, you will likely use some other kind of bootstrap functions and they will be imported from different libraries.


Ok, that’s it for now. The mentioned example code is available on my public github repostitory so you can test it on your machine if you like – it’s actually a modified version of the tutorial from the official Angular 2 website.

Please be aware that Angular 2 is still a beta version so some of the parts I showed today may change before the final release.

Personaly, I don’t like that we are forced to use TypeScript and I will try to find a way how to do without it. I will write a post about it in case of success 🙂 My first impression was that using decorators for components is not clear but after some time spent on it I’m familiar with them and I don’t expect this will cause problems. What I like is that Angular 2 will still be easy for beginners and it’s simple to start creating a new application. We’ll see if it will beat the current popularity of ReactJS.

Related Post

I recommend Nozbe

Simply Get Everything Done

Get your tasks and projects done thanks to Nozbe system and apps for the Mac, Windows, Linux, Android, iPad and iPhone.

If you want to know more about Nozbe and its capabilities, please take a look at my article about this great application.