CODEWITHSUNDEEP
angularprimeng
Billy
Billy

Reputation: 1067

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

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!

Upvotes: 5

Views: 41552

Answers (5)

user10997800
user10997800

Reputation:

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 { }

Upvotes: 0

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

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.

Upvotes: -3

Itguymax
Itguymax

Reputation: 81

Just make sure you have this setup:

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

Upvotes: 2

priyanka pethkar
priyanka pethkar

Reputation: 46

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.

Upvotes: 3

何耀健
何耀健

Reputation: 91

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.

Upvotes: 9

Related Questions