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