angular - how to combine few ngclass together in one div

Question

I would like to combine multiple ngClass if else statement together, I have tried but not able to resolve it.

<div
    [ngClass]="[tabItem === 'unavailable' ? 'background-grey' : selected ? 'card-selected cursor' : 'cursor']"
    [ngClass]="[hasAlerts ? 'banner' : 'no-banner']">
</div>

My attempt:

<div
    [ngClass]="[{'banner': hasAlerts, 'no-banner': !hasAlerts}, tabItem === 'unavailable' ? 'background-grey' : selected ? 'card-selected cursor' : 'cursor']">
</div>

Answer 1

I'm finally able to resolve the issue by using this method

<div
[ngClass]="{'banner': !!alerts?.length, 'no-banner' : !alerts?.length, 'background-grey': tabItem === 'unavailable', 'cursor': tabItem === 'available', 'card-selected': selected}"
></div>