Revisiting Realtime Angular 2

In May, Angular 2 released rc.1 and it brought quite a number of changes, mainly package renaming and some moving around. To get a sense of the framework with the official release candidate, we’re going to build a realtime Angular 2 app that lets you search Twitter for realtime updates.

This blog post is an update to our original Angular 2 post, but up to date with Angular 2’s first release candidate. Many thanks to Nathan Walker for his hard work updating the code and this post.

Please note that Angular 2 is in release candidate stage so some code may well change over time, but should be fairly consistent with what you can expect in the final release. If you’re feeling eager and would like to skip ahead to the code, you can do so on GitHub. You can also see the app running and try it out for yourself.


Our application will allow users to enter search terms and get realtime results back from the Twitter streaming API. To do this we’ll be using the Pusher datasource API community project. This API listens to channel existence webhooks from Pusher and searches Twitter whenever a new channel is occupied, using the name of the channel for the search term. We won’t dive into detail on the server side in this post, but check out the Pusher datasource API README for a detailed explanation.

Getting Started

Angular 2 introduces a lot of new concepts, many of which we’ll see throughout this tutorial. We’ll be following the structure laid out in the Angular 2 quickstart tutorial, so refer to that if you’d like more information on why our app is structured as it is. If you’ve not read through that tutorial first you should, it introduces libraries like TypeScript and SystemJS that are important when building Angular 2 applications.

Building our realtime Angular 2 Application

We’ll be starting with an identical structure to the AngularJS quickstart project. We have all our code contained within src/, including the TypeScript config file, our HTML and the app/ folder which will contain our TypeScript source.

- package.json - node_modules - src/ - app/ - app.component.ts - index.html - tsconfig.json

Angular 2 removes the concept of controllers in favour of components. In Angular 2 everything is a component; the first component we’ll build will be the one that holds our entire application in it. We’ll define our component in src/app/app.component.ts.

import { bootstrap } from '@angular/platform-browser-dynamic'; import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '' }) class AppComponent { } bootstrap(AppComponent);

Couple things of note here: If you are coming from the earlier betas, notice the package import changes. Instead of bootstrap coming straight from core, it’s coming from a specific package which signals the adoption of more separation to support a wide variety of platforms, which is a good thing for everyone. For instance, a native mobile app, see example, can now use it’s own bootstrap or a universal Angular app which may run on the server, see example.

Now we can update our index.html file to use this component. From the Angular 2 getting started guide you’ll remember that at the top of the HTML file we’re loading Angular, SystemJS and then importing the generated JavaScript file. To have your TypeScript compiled every time you save, run npm run tsc in a tab. This starts the TypeScript compiler and watches for changes, running for each TypeScript file in the app directory and creating the corresponding JavaScript file.

Originally published at

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.