In my code, I have a list of cells, and I am displaying that list in the form of buttons. On those buttons, you can see the number of elements inside the cell. If a cell is empty, I want it the button to be green and if it has any elements in it, I want it to be red. My code is below, how can I do this?
<button mat-button class="green fuse-white-fg"
*ngFor="let prm of cell">Package Count: {{prm.PackageCount}}</button>
another way to do it as.
<button mat-button [class.green]="!prm.PackageCount" [class.red]="prm.PackageCount" *ngFor="let prm of cell">
Package Count: {{prm.PackageCount}}
</button>
You can use ngStyle attribute:
<button mat-button [ngStyle]="{ 'background-color': prm.PackageCount ? 'green' : 'red' }" *ngFor="let prm of cell">
Package Count: {{prm.PackageCount}}
</button>
You can use ngclass.
<button mat-button class="fuse-white-fg"
[ngClass] = "{'green':!prm.PackageCount, 'red':prm.PackageCount>0}"
*ngFor="let prm of cell">Package Count: {{prm.PackageCount}}</button>
where green and red are css classes
