Hello World in 60 Seconds
Implement a super-simple <hello-world> custom element using an Angular component
written in TypeScript.
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.
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.
Inline templates with template literals (using back-ticks) and external templates with absolute and relative paths.
Use template expressions in double curly braces to read data from the component class and template reference
variables. Covers the safe navigation operator, HTML sanitizing for security and the ngNonBindable
Use template expressions to bind to DOM properties such as hidden and title on
standard HTML elements such as div and span.
See how event bindings listen for DOM events such as click and keypress on
standard HTML elements such as button and input.
Combine the square brackets of property binding and the parentheses of event binding
to create two-way binding with ngModel.
Bind to HTML <input> fields such as
text, textarea, checkbox, radio
and select (drop-down list).
See how to use the following built-in directives with Angular 2 and TypeScript:
ngIf, ngSwitch, ngFor, ngClass
Property and event bindings on components with @Input and @Output.
Routing and Navigation
Angular 2 Router Example
Use the Angular 2 router to navigate between components when the user clicks a link.
We take a look at routerLink, routerLinkActive, <router-outlet> and more.
Nested Child Routesbeta
Configure the Angular 2 router to use child routes to navigate between components
when the user clicks a link in a sub-menu.
Learn Angular 2 with TypeScript
This tutorial introduces the core concepts of Angular 2 with TypeScript.
Let's start by displaying a simple message on our page using a custom element.
This simple component will display a welcome message by inserting an HTML
template inside the custom <ol-message></ol-message> tags on our page.
After loading the required library files, we use SystemJS to dynamically load the modules for our application.
Let's ramp things up a bit and create a couple of components to display a list of Olympic events for each sport.
This version of the application numbers the sports and only displays the events if there are a total of three or less.
Demonstrates a couple of Angular directives; ngFor and ngIf.
The Http Service
We use the Http service from Angular's http module to perform a get request on our URL.
The result of this request is an RxJS Observable object.
Next we refactor the code to move the data access code out of the component and into a custom service.
Services allow us to re-use pieces of functionality throughout our application.
In this version of the application the user clicks the sport name to show or hide the Olympic events.
We introduce a new nested element and show how components
communicate using property and event bindings.
In the latest changes to our application we add a search box to filter the sport names
along with an X to clear the search value.