A quick start example for beginners who are new to Angular and TypeScript.
Here we implement a super-simple <hello-world>
custom element using an Angular component.
The Angular 2 with TypeScript Tutorial
Learn the basics of Angular 2 with TypeScript.
This tutorial includes examples of components, template syntax, property binding, event binding, bootstrapping and more.
Angular 2 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 Angular uses the ngIf, ngSwitch, ngFor, ngClass
and ngStyle directives to transform the DOM when a template is rendered.
adds and removes elements in the DOM based on the results of an expression.
displays one element (and its children) from a set of possible options, based on some condition.
is a repeater directive which outputs a list of elements by iterating over an array.
adds and removes CSS classes on an element.
sets CSS styles on an HTML element conditionally.
Component Input Output
Use property binding and the @Input decorator to pass data into a component,
and @Output and EventEmitter to pass data out and bind to an event.
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 Routes
An example of how child routes and nested <router-outlet>
directives allow navigation between multiple views when a user clicks a link in a sub-menu.