4

I want to use this PrimeNG-Dropdown in my application. So what I did:

npm i primeng --save

Then I added the DropdownModule in my imports from app.module.ts. Afterwards, I included the following code in my html:

<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown>

On running ng serve and starting localhost:4200 I get the following error:

./node_modules/primeng/components/multiselect/multiselect.js Module not found: Error: Can't resolve '@angular/cdk/scrolling' in '%projectroot%\node_modules\primeng\components\multiselect'

I also tried removing the import from the imports-Array, which resulted in a different error. What am I doing wrong? I am using Angular 7 btw.

When removing the import I get the following error:

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]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown"): ng:///AppModule/ProjectGeneratorComponent.html@13:18
'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]="optionList" [(ngModel)]="selectionString" placeholder="Choose one">"): 
2
  • Could you please also paste the second error you are seeing after removing the module from imports?
    – mpasko256
    Dec 21, 2018 at 17:50
  • @mpasko256 I updated my post
    – Rüdiger
    Dec 21, 2018 at 18:37

4 Answers 4

21

You need to install Angular CDK. use npm install @angular/cdk --save command.

and then import multi selecte module in appModule using

import {MultiSelectModule} from 'primeng/multiselect';
1
  • 1
    this is worked and thank you but I didnt't understand how this is solved. Can you explain?
    – ddagsan
    Mar 9, 2019 at 9:25
8

if you want to use prime NG component, first you should do some steps and be careful about them that it has been done well. first you should install the packages through terminal in your code editor. you should install these:

    npm install primeng --save   //install prime in your machine

    npm install primeicons --save    //install prime icon in your machine

next : you should go to angular.json file in your project and in the style section you should copy these lines. these lines actually are the path of the libraries in your node_module folder. but something that is really important in this chapter is, which version of angular you are using. if you are using angular version 4 and less than that you should copy these path to the style chapter:

"../node_modules/primeicons/primeicons.css",
"../node_modules/primeng/resources/themes/nova-light/theme.css",
"../node_modules/primeng/resources/primeng.min.css",

but if you are using version more than 4 it means 5 or 6 or 7 you should copy these path:

  "./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css",

then you can go and simply import the primes module in your app.module and use the html markup to render the components. but be aware that some components need animations that you should install that on you machine through npm.

     npm install @angular/animations --save

and import modules in the app module:

 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

i hope it helps you .

0

Try in appmodule.ts:

import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";

@NgModule({
  ...
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
0

Import FormsModule to the module where you imported the DropdownModule. I got the same issue, and that is how I resolved it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.