How can i use an ngSwitch to change color of icon inside an ngIf-CodePudding

I have a template which I am using inside a Cell to display an icon as well as a tooltip. I currently only display an icon if there is a value which is in my case the listingCount is > 0. All that works as expected but I want to be able to change the color of the image which is currently green to others like red, yellow etc based on the value in the

Here is what my template code looks like right now

<ng-template #mlsCell let-row>
    <igx-icon [igxTooltipTarget]="tooltipRef" (click)="showMlsInfo(row)" *ngIf="row?.listingCount > 0" color="green" [igxTooltipTarget]="locationTooltip">difference</igx-icon>
    
<div  #locationTooltip="tooltip" igxTooltip>
    <div >
        <div>
            <div>BA : {{row?.lisiting?.BuyerAgentFirstName}} {{row?.lisiting?.BuyerAgentLastName}}</div>
            <div>BO : {{row?.lisiting?.BuyerOfficeName}}</div>
            <div>LA : {{row?.lisiting?.ListAgentFirstName}} {{row?.lisiting?.ListAgentLastName}}</div>
            <div>LO : {{row?.lisiting?.ListOfficeName}}</div>
            <div>DOM : {{row?.lisiting?.DaysOnMarket}}</div>
            <div>OMD : {{row?.lisiting?.OnMarketDate}}</div>
            <div>CD : {{row?.lisiting?.CloseDate}}</div>
            <div>LP : {{row?.lisiting?.ListPrice}}</div>
            <div>CP : {{row?.lisiting?.ClosePrice}}</div>
        </div>
    </div>
</div>
</ng-template>

I get it working but not sure if the below is the best approach to deal with cases like this where you have one main condition and then want to change colors or other things based on a value.

<igx-icon [igxTooltipTarget]="tooltipRef" (click)="showMlsInfo(row)" *ngIf="row?.listingCount > 0  || row?.StandardStatus =='Closed'" 
            color="red" 
            [igxTooltipTarget]="locationTooltip">difference</igx-icon>
<igx-icon [igxTooltipTarget]="tooltipRef" (click)="showMlsInfo(row)" *ngIf="row?.listingCount > 0  || row?.StandardStatus =='Active'" 
            color="green" 
            [igxTooltipTarget]="locationTooltip">difference</igx-icon>
<igx-icon [igxTooltipTarget]="tooltipRef" (click)="showMlsInfo(row)" *ngIf="row?.listingCount > 0  || row?.StandardStatus =='Pending'" 
            color="yellow" 
            [igxTooltipTarget]="locationTooltip">difference</igx-icon>

CodePudding user response：

why use ngSwitch when you can just do something like this:

<igx-icon [igxTooltipTarget]="tooltipRef" (click)="showMlsInfo(row)" *ngIf="row?.listingCount > 0" 
            [color]="row?.StandardStatus =='Pending' ? 'yellow' : row?.StandardStatus =='Closed' ? 'red' : 'green'" 
            [igxTooltipTarget]="locationTooltip">difference</igx-icon>

granted this isn't ideal, as it's still a kind of crowded template IMO, but it's better than repeating every bit of this component 3 times.