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

The Angular 2 with TypeScript Tutorial

Learn Angular 2 with TypeScript. This tutorial includes examples of components, template syntax, property binding, event binding, bootstrapping and more.

Quick Tip

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

The Application

This is the block counter application we are building.

Loading...

Custom Element

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

index.html x
Loading...

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

Quick Tip

In the text below, when you see a word or phrase with this color, click on it to highlight the source code. Click it again to remove the highlight.

Component

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

The component class is written in TypeScript and defines the data and application logic for the component. The @Component decorator provides additional meta-data for the class.

block-counter.component.ts x
Loading...

So when the application starts, Angular will locate the <block-counter> element using selector, insert the contents of the template between the tags, and apply the CSS rules specified in the styles property.

The template accesses properties and calls methods on the component class using property bindings, event bindings and interpolation. We'll take a look at this next.

Template Syntax

Interpolation

Angular evaluates expressions in curly braces such as {{ 1 + 2 }}, {{'Hello' + user.name}} or {{count || 'none'}} using the component class as the execution context (which is why we can use count in our example). The result is then substituted into the template using interpolation.

Event Binding

An event binding evaluates the expression in quotes whenever the DOM event in parentheses (such as mouseover, keyup or click) is detected. So, in this example, the updateCount method is executed whenever a click event is received on either of the two buttons.

block-counter.component.ts x
Loading...

Property Binding

A property binding binds the result of the expression in quotes to the DOM property (such as hidden, innerHtml or disabled) in square brackets. Here, the disabled property is used to enable or disable the button based on the result of the expression.

Also, the innerHtml property of this span element is set to the results of the blocks getter method. We use innerHtml rather than interpolation here to insert the value as HTML. Interpolation escapes HTML and would display &#9609;&#9609;&#9609; rather than ▉▉▉.

Bootstrapping

The main module is loaded from the main.ts file, and our application is started by calling the Angular bootstrap function and passing in the name of the BlockCounterComponent class we saw earlier.

main.ts x
Loading...
block-counter.component.ts x
Loading...

At this point, Angular reads the BlockCounterComponent meta-data from the @Component decorator, locates an element tag named <block-counter> using the selector, loads the template between those tags, and applies the CSS styles.

Where Next?

Angular 2 with TypeScript Configuration

Configure Angular 2 and TypeScript to download dependencies from node modules or a CDN, and to compile the TypeScript during development or in the browser at runtime.

More Tutorials

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

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

Source Code

Take a look at the source code on plunker or in the angular-2-block-counter GitHub repo.