Start Routing

[web-dave]

• Set routerLink in my-nav
• Setup routes
• Set /books as default
• Set /about as fallback
• remove <books></books> from app.component.html

[web-dave]

my-nav.component.html

    <li class="nav-item"><a class="nav-link" [routerLink]="['books']">Books</a></li>
    <li class="nav-item"><a class="nav-link" [routerLink]="['about']">About</a></li>

[web-dave]

app-routing.module.ts

const routes: Routes = [
  {
    path: 'books',
    component: BooksComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: '',
    redirectTo: '/books',
    pathMatch: 'full' <-- !!
  },
  {
    path: '**', <-- Fallback allways the last route!
    redirectTo: '/about',
    pathMatch: 'full'
  }
];

[web-dave]

Child routing