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

Question

Getting this error when trying to add a primeNG dropdown to userform.component.ts, I've referenced this but to no avail as I already have this fix immplemented: primeng dropdown component error ('p-dropdown' is not a known element)

Uncaught Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'p-dropdown'.
1. If 'p-dropdown' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'p-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<p-dropdown [ERROR ->][options] = "technologies" [autoWidth] = "false" id = "technologies"></p-dropdown>

GIT REPO: https://github.com/BillyCharter87/Tech-O-Dex

Thanks!

You didn't import the UserformModule inside of the AppModule. — Chau Tran, Sep 24 '17 at 00:03

score 8 · Answer 1 · answered Jan 18 '18 at 05:07

8

Normally, this error occurs when you missed some imports. Please add these line if missing:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DropdownModule } from 'primeng/primeng';

And add them in imports as well.

answered Jan 18 '18 at 05:07

何耀健

81
1
3

score 3 · Accepted Answer · edited Jan 29 '19 at 07:57

3

It may possible that you are using p-dropdown in another component and in that another component's module you have not imported DropdownModule. I did the same mistake and got resolved by putting DropdownModule in AppModule as well as in specific component's Module.

edited Jan 29 '19 at 07:57

gehbiszumeis

3,525
4
24
41

answered Jan 29 '19 at 07:10

priyanka pethkar

46
2

score 2 · Answer 3 · edited Nov 21 '19 at 00:58

2

Just make sure you have this setup:

@NgModule({
  declarations: [YourComponent],
  imports: [DropdownModule],
})

edited Nov 21 '19 at 00:58

Das_Geek

2,775
7
20
26

answered Nov 20 '19 at 22:53

Itguymax

81
1
2

score 0 · Answer 4 · answered Dec 29 '22 at 21:55

You should have added refrence library in yourcomponent.module.ts like below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { CalendarModule } from 'primeng/calendar';

import {ListboxModule} from 'primeng/listbox';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ListboxModule,
    FormsModule,
    CalendarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lazar Ljubenović · Answer 5 · 2022-05-06T03:50:33.663

The Angular's error message is pretty verbose and if you read it carefully, you can easily solve the problem on your own.

The first item applies to your case: you know that p-dropdown is an Angular component and you know that it has options input. The error message asks you to verify that it is a part of the module you're using it in. And indeed, you're trying to use a component without importng the module wich exports it.

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

5 Answers5