Angular 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.

Last updated Nov 2017, Angular version 5.0

Custom Element

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

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Hello World</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-hello-world></app-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 <app-hello-world> element which we added to our index.html page.

Our component looks like this.

app.component.ts
import { Component } from '@angular/core';

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

@Component Decorator

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

app.component.ts
import { Component } from '@angular/core';

@Component({ selector: 'app-hello-world', template: '<h1>Hello {{name}}!</h1>', })
export class AppComponent { 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.

app.component.ts
import { Component } from '@angular/core';

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

Summary

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

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Hello World</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-hello-world></app-hello-world>
</body>
</html>
app.component.ts
import { Component } from '@angular/core';

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

Where Next?

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

  • Hello World - Implement a super-simple <hello-world> custom element using an Angular and TypeScript.
  • 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.