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
custom element using an Angular component.
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.
First, we add a custom element called
<hello-world> to the
To implement this custom element we need to create a component.
Components implement custom elements such as
<user-details> or in our case the
element which we added to our
Our component looks like this.
The component class is pure TypeScript and defines any data or application logic for the component.
Here we simply declare a private variable called
@Component decorator provides additional meta-data for the class.
selector identifies the
element that this component implements, and
template contains the HTML to be rendered
The template expression in double curly braces reads the
from the component class and substitutes the value into the template using interpolation.
Source Code Highlighting
In the text below, when you see a word or phrase, click on it to highlight the relevant bits of the source code.
When the application starts, Angular will substitute the
name value into the
<hello-world> element on the index page
<hello-world> tags with the template output.
Unsurprisingly, the result looks like this:
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.
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.