5.0: Adding Components and Routing

Let's add some components to use our new and improved User class.

Generate Components

Let's generate the components that we have in the nav, but can't navigate to yet.

1. MemberListComponent - where we'll display users and allow filtering, sorting, etc.

2. Followers - where we'll display users the logged in user is following, or users that are following them

3. Messages - where we'll display inbox / outbox for messages

In the root of your SPA project, run the following commands:

ng g c members/member-list --no-spec
ng g c followers --no-spec
ng g c messages --no-spec

Import RouterModule Into the AppModule

In your app.module.ts file, import RouteModule and add RouterModule to the imports:

import { RouterModule } from '@angular/router';
//  ...
imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
//  ...

Add Routing

Next, in the /src/app folder, add a new file called routes.ts to hold our routes and import the components.

export const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'members', component: MemberListComponent },
    { path: 'messages', component: MessagesComponent },
    { path: 'followers', component: FollowersComponent },
    { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

Go back to app.module.ts and import appRoutes:

import { appRoutes } from './routes';

Add Routes to NavBar

In nav.component.html update the navbar links to use Angular router instead of the href attribute:

BEFORE:

<nav class="navbar navbar-expand-lg navbar-dark nav-red">
  <div class="container">
    <a class="navbar-brand" href="#">1150Connect</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/members']">Users</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/followers']">Followers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/messages']">Messages</a>
        </li>
      </ul>

AFTER:

<nav class="navbar navbar-expand-lg navbar-dark nav-red">
  <div class="container">
    <a class="navbar-brand" [routerLink]="['/home']">1150Connect</a>        <!-- ADDED -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/members']">Users</a>         <!-- ADDED -->
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/followers']">Followers</a>   <!-- ADDED -->
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['/messages']">Messages</a>     <!-- ADDED -->
        </li>
      </ul>

Add Router to the App Component Template

In app.component.html, instead of loading <app-home> - we'll load <router-outlet>

<app-nav></app-nav>

<router-outlet></router-outlet>

Run the SPA project with ng serve and verify that you can click around on the navbar without an issue.

Only Show Menu Options If Logged In

Finally, let's only display the menu options if a user is logged in.

In the <ul> element containing our list items of our menu options, add an ngIf

<ul class="navbar-nav mr-auto" *ngIf="loggedIn()">
    <li class="nav-item">
    <!-- ... -->