Angular8 PrimeNG multiselect disabled property is not working - html

Question

I'm trying to integrate PrimeNG multi select, in that I want to disable some options.
I've used disabled property as mentioned in PrimeNG document but it's not working.
Here are a code snippet and options values:
<p-multiSelect [filter]="true" [virtualScroll]="true" [resetFilterOnHide]="true" optionLabel="label" [(ngModel)]="rowData[col.dataField]"
name="{{col.dataField}}_{{topIndex}}_{{rowIndex}}_{{colIndex}}" [options]="calculationVariables"
defaultLabel="Please Select" autoWidth="false" [style]="{'width':'100%'}" styleClass="priliminary-dorpdown-style {{rowData[col.dataField]?.length == 0 ? 'invalid-control': null}}">
<ng-template let-item pTemplate="selectedItem">
<span class="multicheck-label">{{item.label}}</span>
</ng-template>
<ng-template let-variable pTemplate="item">
<div pTooltip="{{variable.label}}" tooltipPosition="right">
<span class="multicheck-label">{{variable.label}}</span>
</div>
</ng-template>
</p-multiSelect>

Answer 1

You can also disable any item in primeng multiSelect using ng-template, click event and custom style as below:
Method that gets triggered on click event
onClick(disabled: boolean) {
if(disabled) {
event.stopPropagation();
}
}
Customizing the Primeng MultiSelect using ng-template and adding ng-style
<p-multiSelect optionLabel="label"
name="{{col.dataField}}_{{topIndex}}_{{rowIndex}}_{{colIndex}}"
defaultLabel="Please Select"
autoWidth="false"
[filter]="true"
[virtualScroll]="true"
[resetFilterOnHide]="true"
[(ngModel)]="rowData[col.dataField]"
[options]="calculationVariables"
[style]="{'width':'100%'}"
styleClass="priliminary-dorpdown-style {{rowData[col.dataField]?.length == 0 ? 'invalid-control': null}}">
<ng-template let-option pTemplate="item">
<div class="multicheck-label"
(click)="onClick(item.disabled)"
[ngStyle]="item.disabled? {'color': '#ccc', 'cursor': 'default'} : ''"> {{item.label}}
</div>
</ng-template>
<ng-template let-variable pTemplate="item">
<div pTooltip="{{variable.label}}" tooltipPosition="right">
<span class="multicheck-label">{{variable.label}}</span>
</div>
</ng-template>
</p-multiSelect>

Answer 2

In primeng 11 new property "optionDisabled" has introduced.
use case:
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" optionDisabled="inactive"></p-multiSelect>
export class MultiSelectDemo {
cities: City[];
selectedCities: City[];
constructor() {
this.cities = [
{name: 'New York', code: 'NY', inactive: false},
{name: 'Rome', code: 'RM', inactive: true},
{name: 'London', code: 'LDN', inactive: false},
{name: 'Istanbul', code: 'IST', inactive: true},
{name: 'Paris', code: 'PRS', inactive: false}
];
}
}
Particular options can be prevented from selection using the optionDisabled property.