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

swarbrick85
  • 61
  • 7

1 Answers1

0

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>
Joe - GMapsBook.com
  • 15,787
  • 4
  • 23
  • 68
  • You are wrong for overkill!! For *ngIf, every condition will be checked and the code inside the true condition will be executed. For [ngSwitch], only the code inside the specific case will be executed (using break;). So, [ngSwitch] will be faster. – Tzimpo Mar 29 '20 at 20:08
  • `Every view that matches is rendered.` -- https://angular.io/api/common/NgSwitch#description How does the walker know which view matches? A condition is checked :) But anyways, I still stand by what I wrote -- `ngSwitch` should not be used here. – Joe - GMapsBook.com Mar 29 '20 at 20:21