how to change css class dynamically with angular

Question

I am using bootstrap4 navs with a form I am trying to change the css class to display: none; for every tab that is not selected I have tried to make this happen by using ngClass but didn't work stackblitz demo

  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="itemSummary-tab" data-toggle="tab" href="#itemSummary" role="tab" aria-controls="itemSummary" aria-selected="true">Item Summary</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="details-tab" data-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false">Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="measurement-tab" data-toggle="tab" href="#measurement" role="tab" aria-controls="measurement" aria-selected="false">Measurement</a>
    </li>
  </ul>

     <div class="tab-pane fade show active" ngClass="!active? display:none" id="itemSummary" role="tabpanel" aria-labelledby="itemSummary-tab"> 
    ....
    </div>
  <div class="tab-pane fade" id="measurement" ngClass="!active? display:none" role="tabpanel" aria-labelledby="measurement-tab">
...
</div>
  <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">
...
</div>

Create one demo link on stackblitz.com if you arent getting any solution. Will try to work on that code — Shashank Vivek
– Shashank Vivek, Commented Jan 22, 2020 at 13:13
stackblitz.com/edit/angular-szkxtx here is my stackblitz demo for my problem — user2004
– user2004, Commented Jan 22, 2020 at 14:05

Shashank Vivek · Accepted Answer · 2020-01-23 14:18:08Z

4

Try this demo code.

Created a method in ts file as:

  activateClass(tab) {
    this.selectedTabName = tab;
  }

and in html

    <li *ngFor="let tab of tabs"  (click)="activateClass(tab)" class="nav-item">
      <a class="nav-link" id="{{tab}}-tab" [ngStyle]="{'background-color': (selectedTabName === tab) ? 'red' : 'black' }" data-toggle="tab" href="#{{tab}}" role="tab" >{{tab}}</a>
    </li>

replace above code of [ngStyle] , with below one to meet your requirement of display:none

[ngStyle]="{'display': (selectedTabName === tab) ? '' : 'none' }"

Not sure how will someone ever select another tab when it in display:none state

edited Jan 23, 2020 at 14:18

answered Jan 23, 2020 at 6:13

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

Comments

itzzmeakhi · Accepted Answer · 2020-01-22 10:00:54Z

3

You can assign class to an element using ngClass Directive.

<p
  [ngClass]="{
  'red': classStyle,
  'green': !classStyle}">
  Dynamic classes
</p>

css

.red {
  background-color: red;
}

.green {
  background-color: green;
}

answered Jan 22, 2020 at 10:00

itzzmeakhi

2941 gold badge2 silver badges12 bronze badges

Comments

Johan Faerch · Accepted Answer · 2020-01-22 09:55:39Z

2

Here is from the docs https://angular.io/api/common/NgClass

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

But since you are just trying to set a single style Shashank Vivek is right that you should instead try https://angular.io/api/common/NgStyle <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

Which would make your example (you need the square brackets!):

<some-element [ngStyle]="{ 'display: none': !active }">...</some-element>

This sets display: none when active === false

answered Jan 22, 2020 at 9:55

Johan Faerch

1,2564 gold badges15 silver badges32 bronze badges

Comments

ketan vaidya · Accepted Answer · 2020-01-23 08:18:03Z

1

You can do that using conditional classes ref https://malcoded.com/posts/angular-ngclass/

edited Jan 23, 2020 at 8:18

answered Jan 23, 2020 at 6:21

ketan vaidya

494 bronze badges

Collectives™ on Stack Overflow

how to change css class dynamically with angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related