NgClass to have dynamic value

Question

I am trying to display dynamic values within divs in tile format and adding particular classes to these divisions according to the statusIds [which I get in the response object].

I can achieve this with following code,

<div class="tile-card p-2" style="cursor: pointer;" [ngClass]="{'card-open': SRcounts.statusId == 1,
        'card-wait': SRcounts.statusId == 2,
        'card-assign': SRcounts.statusId == 3,
        'card-vip': SRcounts.statusId == 4,
        'card-email': SRcounts.statusId == 14,
        'card-voice': SRcounts.statusId == 7,
        'card-nms': SRcounts.statusId == 8,
        'card-requested': SRcounts.statusId == 9,
        'card-approval': SRcounts.statusId == 10,
        'card-subassign': SRcounts.statusId == 11,
        'card-change-1': SRcounts.statusId == 12,
        'card-change-2': SRcounts.statusId ==13,
        'card-change-3': SRcounts.statusId ==16,
        'card-change-4': SRcounts.statusId ==15,'card-change-5': SRcounts.statusId ==25}" data-toggle="tooltip" title="{{SRcounts.statusLable}}">
        <p class="status">{{SRcounts.statusLable | slice:0:11}}..</p>
        <p class="number">{{SRcounts.statusCount | number}}</p>
      </div>

but I want to reduce these multiple checks, Is there a way where I can take statusId in my classname?

how can I achieve [ngClass]="{'card-status-'+SRcounts.statusId}"

I think this should work : `[ngClass]="'card-status-' + SRcounts.statusId"` — ibenjelloun, May 17 '18 at 11:46
Does this (https://stackoverflow.com/a/37091329) link help you — Sanoj_V, May 17 '18 at 11:47
@Sanoj_V No Sanoj.. I had already checked that, anyway thank you for the quick response — Varsha Bommarabettu, May 17 '18 at 11:53

score 0 · Answer 1 · answered May 17 '18 at 11:49

Maybe this works:

//define an array in the component with the css class names
SRcountsStatuses = ['card-open', 'card-wait', 'card-assign', /* etc...*/];

//in the template, access the class name you need by its index
[ngClass]="SRcountsStatuses[SRcounts.statusId]"

NgClass to have dynamic value

1 Answers1