Error when trying to use p-Dropdown from PrimeNG in application

Question

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">"): 

Answer 1

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';

Answer 2

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 .