How to Add the text "All" next to select all check box in PrimeNG multiselect

Question

I have a PrimeNG multiselect with Select all option. Currently the "Select All" option is just rendered as a check box with no labels against it. I would like add the text "All" against the select all option.

<p-multiSelect [options]="years" [style]="{'width':'300px'}" [(ngModel)]="selectedYears"
                            [filter]="true" [showToggleAll]="true"></p-multiSelect>

Answer 1

1. You can add flag [filter]="false" to p-multiselect:

<p-multiSelect [options]="years" [style]="{'width':'300px'}" [(ngModel)]="selectedYears" [filter]="false" [showToggleAll]="true"></p-multiSelect>

2. Put template into p-multiselect element:

<ng-template pTemplate="header">
  <div class="checkbox-all-text">{{ sharedResources.ALL }}</div>
</ng-template>

3. add css:

.checkbox-all-text {
    position: absolute;
    left: 40px;
}