Using ngClass within expressions in ngFor Angular

38 views Asked by At

I want to make a filter. I have a title field and a count field. In the title field, I select the product, then I select the parameter for the filter in the checkbox. The count field should contain the number of selected product filters. If the counter is empty it is gray color, if the value is > 0 it is red color. I tried to accomplish this with ngClass, but the color changes for every count.

Pug:

            .filter-item(
                '*ngIf'='!disabled'
                '[ngClass]'='query'
                '(click)'='selectFilter(k)'
            )
                .filter-title('[ngClass]'='{active: title.active}') {{ item.title }}
                .filter-count('[ngClass]'='{active: item.count, disabled: !item.count}') {{ item.count }} 

SCSS:

             color: var(red);
            }

            &.disabled {
                color: var(grey);
            } 
1

There are 1 answers

0
Itra On

I needed to specify the exact value of the count for the disabled style:

.filter-count('[ngClass]'='{active: item.count, disabled: item.count?.length == 0}') {{ item.count }}