Angular 2 Component Router

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div class="row">
    <div class="col-sm-12 actions">
      <a routerLinkActive="active" routerLink="users" class="btn btn-primary">Users</a>
      <a routerLinkActive="active" routerLink="widgets" class="btn btn-warning">Widgets</a>
    </div>
    <router-outlet></router-outlet>
  </div>  
  `
})
export class AppComponent implements OnInit {
  constructor() {}
  ngOnit() {}
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent }   from './app.component';
import { UsersComponent }   from './users.component';
import { WidgetsComponent }   from './widgets.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, AppRoutingModule ],
  declarations: [ AppComponent, UsersComponent, WidgetsComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

.pageheader {
    padding: 2rem 15px;
    color: #cdbfe3;
    background-color: #563d7c;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 3rem;
    margin-bottom: 2rem;
    text-align: left;    
}

.container h1 {
  text-align: center;
}

.actions {
  margin-bottom: 2rem;
}

.btn {
  outline: none !important;
}

.active {
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.7);
}

<!DOCTYPE html>
<html>

<head>
  <title>Angular 2 Component Router</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <base href=".">

  <!-- 1. Load libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

  <!-- Polyfill for older browsers -->
  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

  <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
  <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

  <!-- 2. Configure SystemJS -->
  <script src="https://cdn.rawgit.com/angular/angular.io/f2daab7/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>

</head>

<!-- 3. Display the application -->

<body>
    <div class="pageheader">
      <h1>Component Router</h1>
      <p class="lead">Using the Angular 2 Component Router</p>
    </div>
    <div class="container">
        <my-app>
          Loading...
        </my-app>
    </div>
</body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import { Component } from '@angular/core';

@Component({
  selector: 'my-users',
  template: `
    <div class="col-sm-12">
      <h1 class="jumbotron">{{title}}</h1>  
    </div>
  `
})
export class UsersComponent {
  title: string = 'Users';
}

import { Component } from '@angular/core';

@Component({
  selector: 'my-widgets',
  template: `
    <div class="col-sm-12">
      <h1 class="jumbotron">{{title}}</h1>  
    </div>
  `
})
export class WidgetsComponent {
  title: string = 'Widgets';
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UsersComponent } from './users.component';
import { WidgetsComponent } from './widgets.component';

const routes: Routes = [
  { path: 'users', component: UsersComponent },
  { path: 'widgets', component: WidgetsComponent },
  { path: '**', redirectTo: '/'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }