Angular 2 Hello World

Angular 2 Hello World app is a basic example to show how to write your first Angular 2 project.

angular 2 hello world
angular 2 hello world

If you want to setup your environment click here

live example and Resources ( Code source A  > Z ) at the end of the article

angular 2 hello world
angular 2 hello world

we want to create a Tag (component) to show hello world.

build hello world
build hello world

We will create 3 files :

File1 : angular-2-hello-world.component.ts

We create the file that contains our <angular-2-hello-world>loading…</angular-2-hello-world> Tag.

 * Created by Tareq Boulakjar. from
import {Component} from 'angular2/core';

/*Angular 2 Hello World Example*/
    selector: 'angular-2-hello-world',
                <div class="bg-primary">Angular 2 Hello World Example</div>
                <div class="bg-info">i'm a value from the Class : {{iAmVariableFromTheClass}}</div>
export class Angular2HelloWorldComponent {
    iAmVariableFromTheClass:string = "Hello World Declaration";
    constructor (){
      this.iAmVariableFromTheClass="Hello World Constructor"; //if you uncomment this the default value will be "Hello World Constructor" : )


file 2 :main.ts

 We boostrap our app.

import {Angular2HelloWorldAppComponent} from "./angular-2-hello-world-app.component";

file3: index.html

We explain the root file:

  • We include the needed css and js files.
  • We configure the System used to load modules. And we run the app.
  • We call our main app:
     <angular-2-hello-world>Loading Sample...</angular-2-hello-world>
<!DOCTYPE html>
        <!-- We set the base href -->
<script>document.write('<base href="' + document.location + '" />');</script>

<title>Angular 2 Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS file -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="" >

<link rel="stylesheet" type="text/css" href="style.css">

    <!-- IE polyfills, keep the order please -->
<script src=""></script>
<script src=""></script>

    <!-- Agular 2 -->
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

    <!-- Agular 2 Router -->
<script src=""></script>
    <!-- Config Agular 2 and Typescript -->
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
    .then(null, console.error.bind(console));


<!-- Run the application -->
    <angular-2-hello-world>Loading Sample...</angular-2-hello-world>

    Copyright 2016 All Rights Reserved.
    Everyone can use this source code; don’t forget to indicate the source please: 

all files from here: angular 2 hello world

angular 2 hello world