Angular 2 with TypeScript Hello World Tutorial

A quick start example for beginners who are new to Angular and TypeScript. This tutorial shows how to implement a super-simple hello-world custom element using an Angular component.

Last updated Apr 2017, Angular version 4.0.3

Custom Element

First, we add a custom element called <hello-world> to the index.html page.

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 Hello World</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
        System.import('app/main.js').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
    <hello-world>Loading...</hello-world>
</body>
</html>

To implement this custom element we need to create a component.

The Component

Components implement custom elements such as <todo-list>, <user-details> or in our case the <hello-world> element which we added to our index.html page.

Our component looks like this.

hello-world.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'hello-world',
    template: '<h1>Hello {{name}}!</h1>'
})
export class HelloWorldComponent {
    private name = "World";
}

Component Class

The component class is pure TypeScript and defines any data or application logic for the component. Here we simply declare a private variable called name.

hello-world.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'hello-world',
    template: '<h1>Hello {{name}}!</h1>'
})
export class HelloWorldComponent { private name = "World"; }

@Component Decorator

The @Component decorator provides additional meta-data for the class. For example, selector identifies the <hello-world> element that this component implements, and template contains the HTML to be rendered between the <hello-world> tags.

hello-world.component.ts
import { Component } from '@angular/core';

@Component({ selector: 'hello-world', template: '<h1>Hello {{name}}!</h1>' })
export class HelloWorldComponent { private name = "World"; }

Interpolation

The template expression in double curly braces reads the name property from the component class and substitutes the value into the template using interpolation.

hello-world.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'hello-world',
    template: '<h1>Hello {{name}}!</h1>'
})
export class HelloWorldComponent {
    private name = "World";
}

Summary

When the application starts, Angular will substitute the name value into the template using interpolation, locate the <hello-world> element on the index page using selector, and replace the 'Loading...' message between the <hello-world> tags with the template output.

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 Hello World</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
        System.import('app/main.js').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
    <hello-world>Loading...</hello-world>
</body>
</html>
hello-world.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'hello-world',
    template: '<h1>Hello {{name}}!</h1>'
})
export class HelloWorldComponent {
    private name = "World";
}

Where Next?

To find out more about Angular and TypeScript, check out these tutorials.

  • The Angular with TypeScript Tutorial - includes examples of components, template syntax, property binding, event binding, bootstrapping and more.
  • Configuration - Configure Angular and TypeScript to download dependencies from node modules or a CDN, and to compile the TypeScript during development or in the browser at runtime.
  • Templates - introduction to inline and external templates.
  • Interpolation - use curly braces and template expressions to output data on the page.
  • Property Binding - bind to DOM properties using square brackets and template expressions.
  • Event Binding - handle DOM events using parentheses and template statements.
  • Two-way Binding - combine property and event binding to create two-way binding with ngModel.
  • Input Binding - bind to <input> fields such as text, textarea, checkbox, radio and select.
  • Built-in Directives - see how to use built-in directives ngIf, ngSwitch, ngFor, ngClass and ngStyle.
  • Component Input Output - use @Input and @Output to pass data in to and out of a component.
  • Angular Router - Use the Angular router to navigate between components when the user clicks a link.
  • Nested Child Routes - An example of how child routes allow navigation between multiple views when a user clicks a link in a sub-menu.