CODEWITHSUNDEEP
javascripthtmlangulartypescript
Rocket Monkey
Rocket Monkey

Reputation: 390

Angular Button Color Change with Condition

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>

Upvotes: 3

Views: 2611

Answers (3)

PMO1948
PMO1948

Reputation: 2554

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

Upvotes: 3

Taimoor Qureshi
Taimoor Qureshi

Reputation: 630

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>

Upvotes: 3

NeNaD
NeNaD

Reputation: 20304

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>

Upvotes: 3

Related Questions