Angular2 applying dynamic css class fails

Question

I have an expansion panel group and I am trying to appy a css class to the active panel:

<mdl-expansion-panel-group>
    <mdl-expansion-panel *ngFor="let task of tasks" [ngClass]="{'active': task.id == selectedTask}">
        <mdl-expansion-panel-header>
            <mdl-expansion-panel-header-list-content><h6>{{task.what_task}} {{task.id}}</h6></mdl-expansion-panel-header-list-content>
        </mdl-expansion-panel-header>
        <mdl-expansion-panel-content>
            <mdl-expansion-panel-body>

                <button mdl-button mdl-button-type="raised" mdl-colored (click)="selectTaskToEdit(task)">
                    Edit
                </button>

            </mdl-expansion-panel-body>
        </mdl-expansion-panel-content>
    </mdl-expansion-panel>
</mdl-expansion-panel-group>

css class active has a background color set to say yellow. In my component I am printing console.log(this.selectedTask==task.id) which comes out true, however my class is not being applied.

My component:

  selectTaskToEdit(task){

    this.task=task;
    this.selectedTask=task.id;
    console.log(this.selectedTask==task.id)
  }

and css:

.active {
  background-color: yellow;
}

Am I doing anything wrong?

UPDATE: I could solve it using [style.background-color]="task.id == selectedTask ? 'yellow': null " however I would like to know if there is a correct way of doing with ngClass

Can you show us selectTaskToEdit code? where you're setting up selectedTask? — Pankaj Parkar
– Pankaj Parkar, Commented Jul 30, 2017 at 9:08
background-color: yellow !important; could you please try and add !important in the end and let me know if it works. — micronyks
– micronyks, Commented Jul 30, 2017 at 9:19

Aleksandr Petrovskij · Accepted Answer · 2017-07-30 09:54:49Z

1

[style.background-color]="task.id == selectedTask ? 'yellow': null"

or

[class.active]="task.id == selectedTask"

is the only way to make it, because mdl-expansion-panel has own host class expressions, which overrides yours [ngClass].

Here is the example plnkr.

edited Jul 30, 2017 at 9:54

answered Jul 30, 2017 at 9:17

Aleksandr Petrovskij

1,2438 silver badges10 bronze badges

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

1 Comment

Thinker Over a year ago

[class.active]="task.id == selectedTask" has no effect :( however the first approach works. I figured it out but will accept it an answer

Collectives™ on Stack Overflow

Angular2 applying dynamic css class fails

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