Angular 5 - ngClass - Not able to add multiple classes

Question

Started to learn Angular 5 and am stuck with ngClass directive. I am trying to apply multiple classes based on a condition, but somehow only 1/2 classes are being applied.

mainnav.component.html

<nav class="navbar navbar-expand-lg fixed-top"
    [ngClass]="{
    'navbar-dark bg-dark' : themeColor === 'dark',
    'navbar-dark bg-primary' : themeColor === 'blue',
    'navbar-light bg-light' : themeColor === 'light'
    }">
...
...
<li class="nav-item">
    <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" (keyup)="onButtonClicked($event)">
    <button class="btn btn-outline-success my-2 my-sm-0" [disabled]="!allowSearch" type="submit">Search</button>
    </form>
</li>
<li class="nav-item dropdown" (mouseover)="openDropDown($event)">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Change Theme
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#" (click)="enableDarkTheme()">Dark</a>
    <a class="dropdown-item" href="#" (click)="enableLightTheme()">Light</a>
    <a class="dropdown-item" href="#" (click)="enableBlueTheme()">Blue</a>
    </div>
</li>

mainnav.component.ts

themeColor: string = 'dark';
enableDarkTheme() {
    this.themeColor = 'dark';
  }

  enableLightTheme() {
    this.themeColor = 'light';
  }

  enableBlueTheme() {
    this.themeColor = 'blue';
  }

The conditions seems to be working fine, but I am not sure why one class is not added as seen in screenshot below,

Does anyone know if my usage of ngClass is wrong?

Daniel W Strimpel · Accepted Answer · 2018-04-25 00:49:57Z

2

There is a previous bug report in the Angular GitHub repo on this very topic.

The reason is because [ngClass] will add classes for the ones that resolve to true and remove classes for those that resolve to false. You are using the same class in multiple cases which creates the problem.

answered Apr 25, 2018 at 0:49

Daniel W Strimpel

8,5002 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

scorpion35 Over a year ago

Interesting! I also missed the point of ngClass that it removes classes if the condition is false. Thanks for the link :) For sake of completeness, this is my new code -

[ngClass]="{     'navbar-dark' : themeColor === 'dark' || themeColor === 'blue',     'bg-dark' : themeColor === 'dark',     'bg-primary' : themeColor === 'blue',     'navbar-light bg-light' : themeColor === 'light'   }

Collectives™ on Stack Overflow

Angular 5 - ngClass - Not able to add multiple classes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related