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>

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>

• javascript
• html
• angular
• typescript

Share Improve this question Follow asked May 6, 2021 at 6:49 Rocket MonkeyRocket Monkey 39011 gold badge77 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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