app.component.html

<div id="main-container" class="container-fluid">
  <nav id="main-menu" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">StarRating</a>
    <button class="navbar-toggler d-lg-none"
            type="button"
      data-toggle="collapse"
      data-target="#mainNavbar"
      aria-controls="mainNavbar"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="toggleNav()">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class=" navbar-collapse" id="mainNavbar"
          [ngClass]="{collapse:navBarCollapsed}">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['property-bindings']"
            (click)="toggleNav(true)">Property Bindings</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['event-bindings']"
            (click)="toggleNav(true)">Event Bindings</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['form-control']"
            (click)="toggleNav(true)">From Control</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['kitchensink']"
            (click)="toggleNav(true)">Kitchensink</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['static-config-override']"
            (click)="toggleNav(true)">Custom Config</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" [routerLink]="['lazy-config-override']"
            (click)="toggleNav(true)">Custom Lazy Config</a>
        </li>
      </ul>
    </div>
  </nav>
  <div id="main-content" class="row">
    <main id="main" class="col">
      <router-outlet></router-outlet>
    </main>
  </div>
</div>