How to remove the checkbox from primeng multiSelect?

Question

I have tried using `ng-template' to display only the label but the checkbox still displays by default. How can I change this default behaviour?

Here's the code using ng-template...... `

<p-multiSelect [options]="conditionList" formControlName="condition" defaultLabel="Select Conditions"
    [showToggleAll]="false" scrollHeight="300px">
   <ng-template let-condition pTemplate="item">
     <div>{{condition.label}}</div>
   </ng-template>
</p-multiSelect>`

Maybe, you can use the component dropdown. I leave the documentation: https://www.primefaces.org/primeng/v8.2.9-lts/#/dropdown — Alba, Oct 16 '20 at 18:03

score 0 · Answer 1 · answered Oct 16 '20 at 17:30

You need to customize MulitiSelect style overcoming View Envapsulation. It can be done in three ways:

Place the selector in global style, e.g. style.scss:

p-multiselect
.p-multiselect-panel
.p-multiselect-items
.p-multiselect-item
.p-checkbox {
   display: none;    
}

Palace the above override in compoennt.scss but add ::ng-deep:

::ng-deep {
    p-multiselect
    .p-multiselect-panel
    .p-multiselect-items
    .p-multiselect-item
    .p-checkbox {
       display: none;    
    }
}

Without ::ng-deep but disable view encapsulation:

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

How to remove the checkbox from primeng multiSelect?

1 Answers1