Angular 2 Routing (3.0.0+) Configuring router-outlet
Example
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, ROUTER_DIRECTIVES} from '@angular/router';
@Component({
selector: 'app',
templateUrl: 'app.html',
styleUrls: ['app.css'],
directives: [
ROUTER_DIRECTIVES,
]
})
export class App {
constructor() {
}
}
<!-- app.html -->
<!-- All of your 'views' will go here -->
<router-outlet></router-outlet>
The <router-outlet></router-outlet> element will switch the content given the route. Another good aspect about this element is that it does not have to be the only element in your HTML.
For example: Lets say you wanted a a toolbar on every page that stays constant between routes, similar to how Stack Overflow looks. You can nest the <router-outlet> under elements so that only certain parts of the page change.
