angularbootstrap-4navbarng-switch

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


<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.


Solution

  • 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>