primeng how to inline style checkbox?

Question

How can I use the style input of p-checkbox to change the border and background color of a checkbox? I already tried [style]="{'background': '#ff0000'}". But this only applies the style to the div which holds the actual checkbox. So its useless. Instead I need to change the border-color and background of the div which has the classes p-checkbox-box and p-highlight. Note: I cant use CSS here because the colors are dynamic and dependant on the content.

Answer 1

You can use renderer2 to manipulate DOM elements and then add style:

1. Get all checkboxes using document.getElementsByClassName('p-checkbox-box')

2. Iterate over each element and add the style you want using renderer2.setStyle()

try this piece of code and add it in ngAfterViewInit():

  let chkboxes = document.getElementsByClassName('p-checkbox-box')
    for (let index = 0; index < chkboxes.length; index++) {
      const element = chkboxes[index];
      this._renderer2.setStyle(element,'background-color','#bf2222');
      this._renderer2.setStyle(element,'border-color','#bf2222');
    }