Background color on primeng p-selectButton

Question

How can i change background color of a primeng p-selectButton component depending on item content?

Answer 1

You can use ng-template to bind dynamic classes based on the content of the button.

in component.html

<p-selectButton [options]="cities1" [(ngModel)]="selectedCity1">
 <ng-template let-item>
   <button class="ui-button mybtn" [ngClass]="getClass(item)">{{item.label}} 
   </button>
 </ng-template>
</p-selectButton>

in component.ts

getClass(item){
 let value = item.value;
 if(value){
    if(value.code === 'NY'){
       return 'red';
     }
     if(value.code === 'RM'){
       return 'pink';
     }
     if(value.code === 'LDN'){
       return 'green';
     }
  }

}

in component.scss

button.red, button.red:hover{
  background: red;
  border: red;
  }
  button.green, button.green:hover{
     background: green;
     border: green;
  }
  button.pink,button.pink:hover{
     background: pink;
     border: pink;
  }
 .mybtn{
    padding: 5px;
  }

Here is updated

stackblitz