Angular 2 Hello World example in TypeScript

In this tutorial, we will create a basic Hello World example using Angular 2 (2.0.0-beta.0) in TypeScript. Looking for javascript version of this example?.

Please note that I normally will not list out all libraries in a separate section as they are all listed in the index.html, unless it is necessary to do so.

So, let’s get started.

Folder structure

Download source code and check the code structure.

Angular 2 Hello World example typescript folder structure


This is how we bootstrap our Angular 2 app in this example.


The is where we define our component “hello-world”. As you can see, this is a very simple component that basically does nothing, but renders the template whenever Angular sees the custom element <hello-world/> .

  • The selector  attribute tells Angular what it needs to look for.
  • The templateUrl tells Angular where the template is.


This is the template for the <hello-world>  component. In this case, the syntax is slightly different from what’s used in Angular 1.


Last but not least, we need to wire up all the above things together, along with the libraries that are required.


Follow the above steps to create those files or simply download the code and run it with a server (I assume you know what server I am talking about).

I used Brackets in this tutorial.

Angular 2 Hello World example typescript demo screenshot


  1. Angular 2 Template Syntax
  2. Angular 2 Hello World example in Javascript


Wayne Hong

Passionate Java full stack developer.