Can't bind to 'options' since it isn't a known property of 'p-multiSelect'

Question

I am trying to implement datatable filter of primeng. My code is as below:

<p-column field="time" header="Time" [filter]="true" filterPlaceholder="&#xf0b0;">
  <ng-template pTemplate="filter">
    <p-multiSelect [options]="time"></p-multiSelect>
  </ng-template>
</p-column>

But it is showing an error: Can't bind to 'options' since it isn't a known property of 'p-multiSelect'.

Chickabiddy

Answer 1

You need to import import {MultiSelectModule} from 'primeng/primeng'; ' in your module.ts under imports

imports: [
  MultiSelectModule
]

Sequel

I add this, but still issue is not fixed . Any reason? – Esperanzaespial

@Esperanzaespial , also include BrowserAnimationsModule, FormsModule before this import – Semela

Answer 2

You need to install Angular CDK. Use npm install @angular/cdk --save command. Import multi select module in yourModule.module using

import {MultiSelectModule} from 'primeng/multiselect';

Flacon

Answer 3

Firstly I had to install angular cdk using next command:

npm install @angular/cdk --save

Then I had to manually write both lines of codes of imports (without auto-completion, for some reason), but after first start everything was successfully compiled and working.

import { MultiSelectModule } from 'primeng/multiselect';

(...)

imports:[
   MultiSelectModule
]

You can read more about MultiSelect from their official documentation: https://primefaces.org/primeng/showcase/#/multiselect

Alecalecia

Answer 4

I had the same error, I have put lowercase "s" in "p-multiSelect".

Wrong:

<p-multiselect [options]="tidList"> </p-multiselect>

Correct:

<p-multiSelect [options]="tidList"> </p-multiSelect>

Fionafionna