Using ngClass within expressions in ngFor Angular

Question

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);
            }

Does this answer your question? [Angular: conditional class with \*ngClass](https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass) — yahyazini, Jan 26 '23 at 18:00

score 0 · Answer 1 · answered Jan 26 '23 at 17:54

0

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 }}

answered Jan 26 '23 at 17:54

Itra

137
1
1
9

Using ngClass within expressions in ngFor Angular

1 Answers1