Tutorial by Examples

Now that the routes are defined, we need to let our application know about the routes. To do this, bootstrap the provider we exported in the previous example. Find your bootstrap configuration (should be in main.ts, but your mileage may vary). //main.ts import {bootstrap} from '@angular/platfo...

Now that the router is configured and our app knows how to handle the routes, we need to show the actual components that we configured. To do so, configure your HTML template/file for your top-level (app) component like so: //app.ts import {Component} from '@angular/core'; import {Router, ROUT...

Now that the routes are set up, we need some way to actually change routes. This example will show how to change routes using the template, but it is possible to change routes in TypeScript. Here is one example (without binding): <a routerLink="/home">Home</a> If the user...

NOTE: This example is based on the 3.0.0.-beta.2 release of the @angular/router. At the time of writing, this is the latest version of the router. To use the router, define routes in a new TypeScript file like such //app.routes.ts import {provideRouter} from '@angular/router'; import {Home} ...

The default Angular router allows navigation to and from any route unconditionally. This is not always the desired behavior. In a scenario where a user may conditionally be allowed to navigate to or from a route, a Route Guard may be used to restrict this behavior. If your scenario fits one of the...

File app.routes Protected routes have canActivate binded to Guard import { provideRouter, Router, RouterConfig, CanActivate } from '@angular/router'; //components import { LoginComponent } from './login/login.component'; import { DashboardComponent } from './dashboard/dashboard.component'; ...

File main.ts (or boot.ts) Consider the examples above: Create the guard (where the Guard is created) and Add guard to route configuration, (where the Guard is configured for route, then APP_ROUTER_PROVIDERS is exported), we can couple the bootstrap to Guard as follows import { bootstrap }...

We're using a toplevel guard in our route config to catch the current user on first page load, and a resolver to store the value of the currentUser, which is our authenticated user from the backend. A simplified version of our implementation looks as follows: Here is our top level route: export c...