Angular 2 with TypeScript Hello World Tutorial - lishman.io
lishman.io Loading..
Style: Blog or IDE

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 Dec 2016, Angular version 2.4.x

widescreen Take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.

Show me the IDE style

Custom Element

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

index.html x
Loading...

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 x
Loading...

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 x
Loading...

@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 x
Loading...

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 x
Loading...

Summary

HighlightSource Code Highlighting

In the text below, when you see a word or phrase with this color, click on it to highlight the relevant bits of the source code.

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 x
Loading...
hello-world.component.ts x
Loading...

Unsurprisingly, the result looks like this:

Loading...

Where Next?

Project Files

explorer

Use the symbol next to the source code above to explore the project files, or switch to the IDE style to get a better overview of the application.

Show me the IDE style

Source Code

The source code for this tutorial is available on plunker and in the angular-2-hello-world GitHub repo.

More Tutorials

To find out more about Angular 2+ 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.