primeng dropdown component error ('p-dropdown' is not a known element)

Question

Following the guide: https://www.primefaces.org/primeng/ I have tried to install PrimeNG to use with Angular4, following the steps detailed above, but I get the error:

'p-dropdown' is not a known element:

I tried to rebuild the projects, as suggested in other posts, but it did not work for me. Any hints?

Here are all the details:

-- PrimeNg Installation

npm install primeng --save

-- file: testdropdown.component.html

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

-- file: testdropdown.component.ts

import { DropdownModule } from 'primeng/primeng';
import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/primeng';

@Component({
  selector: 'app-testdropdown',
  templateUrl: './testdropdown.component.html',
  styleUrls: ['./testdropdown.component.css']
})
export class TestdropdownComponent implements OnInit {

  cities: SelectItem[];

  selectedCity: string;

  constructor() {

  this.cities = [];
    this.cities.push({ label: 'Select City', value: null });
    this.cities.push({ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } });
    this.cities.push({ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } });
  }

  ngOnInit() {
  }

}

-- error:

VM1128:185 [CodeLive] HTTP detected: Connecting using WS
zone.js:630 Unhandled Promise rejection: 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]="cities" [(ngModel)]="selectedCity"></p-dropdown>
"): ng:///AppModule/TestdropdownComponent.html@0:12
'p-dropdown' is not a known element:
1. If 'p-dropdown' is an Angular component, 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. ("[ERROR ->]<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

Bawcock

Answer 1

Import the dropdown module in the module where you declare your component.

   import { DropdownModule } from 'primeng/dropdown';


@NgModule({
  imports: [
   DropdownModule
  ],
  declarations: [TestdropdownComponent ]
 
})
export class myModule { }

Libbie

In my case importing DropdownModule wasn't enough, please check @Karthik H answer below. – Cartage

Answer 2

If still this issue persists, you might have to test one more thing, i.e., if "FormsModule" is imported, if not import it and try,

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

@NgModule({
  imports: [
    DropdownModule,
    FormsModule
  ],

This should solve the issue.

Kg

You saved my day. :thumbup: – Lachman

Exactly, it need FormsModule also !:) – Cartage

How did you know this? That's exactly what my issue was, but the error message was complaining about If 'p-dropdown' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. – Nailbrush

I have worked on primeng extensively since its earlier versions, and I faced this problem frequently when I try to import components. I didn't deep dive much into this error, but my understanding is, in bootstrap, dropdown doesn't work if you are not importing/linking jquery. FormsModule might be internally using jquery. – Kg

Answer 3

You have to add DropdownModule in imports section in the app module or the module where the TestdropdownComponent is declared.

Historicity

Thanks, that solved my issue. I forgot to include it in the imported modules. – Bawcock

Answer 4

Root module file like: app.module.ts. Added something like that. 

import {DropdownModule,AccordionModule,SharedModule, ButtonModule, PanelModule, RadioButtonModule, MessagesModule, KeyFilterModule, FieldsetModule, MessageModule, CalendarModule} from 'primeng/primeng';

@NgModule({
  imports: [
   DropdownModule,
   BrowserModule,
   BrowserAnimationsModule,
   FormsModule,
   AccordionModule,
   PanelModule,
   ButtonModule,
   RadioButtonModule,
   TableModule,
   HttpClientModule,
   ReactiveFormsModule,
   SharedModule,
   MessagesModule,
   KeyFilterModule,
   FieldsetModule,
   CalendarModule,
   MessageModule
  ],
  declarations: [TestdropdownComponent ]

})
export class myModule { }

Vagrom

Answer 5

Add the following two imports in your modules file

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

Sympathizer

Please, format your answer's code :) – Yodel