ts-mean/frontend/main/src/app/components/topnav/topnav.component.html

Boilerplate for a TS-MEAN App

<nav class="navbar sticky-top navbar-toggleable-sm navbar-light bs-topnav">
  <button class="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <a routerLink="/" class="navbar-brand">
    <img src="../assets/img/logo.svg"
         height="35"
         alt="Home Button">
  </a>
  
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item" *ngIf="!loggedIn()">
        <a class="nav-link" routerLink="signup"><b>Sign Up</b></a>
      </li>
      <li class="nav-item" *ngIf="!loggedIn()">
        <a class="nav-link" routerLink="login"><b>Log In</b></a>
      </li>
      <li class="nav-item" *ngIf="loggedIn()">
        <button md-button class="nav-link" (click)="logOut()"><b>Log Out</b></button>
      </li>
    </ul>
  </div>
</nav>