When I use *ngSwitch in a Bootstrap navbar the styling disappears

Question

<ul class='nav navbar-nav'>
                <li class='nav-item'>
                    <ul [ngSwitch]='isLoggedIn' class='nav-item'>
                      <li *ngSwitchCase=true>
                        <a routerLink='/home' id='home' class='nav-item'>Home</a>
                      </li>
                      <li *ngSwitchCase=false>
                        <a routerLink='/login' id='home' class='nav-item'>Home</a>
                      </li>
                    </ul>
                </li>
.
.
.
.

The link changes as it's supposed to when isLoggedIn is toggled, but with this setup there is no Bootstrap styling on the link itself.

Answer 1

Why are you using ngSwitch when you only have 2 cases? Looks like an overkill. More importantly, you've got a ul.nav inside of another ul.nav... Why not go with this:

<ul class="nav navbar-nav">
  <li *ngIf="isLoggedIn">
    <a routerLink="/home" id="home" class="nav-item">Home</a>
  </li>
  <li *ngIf="!isLoggedIn">
    <a routerLink="/login" id="login" class="nav-item">Login</a>
  </li>
</ul>