3

I have tried to setup PrimeNg in to my Angular-CLI project. So I followed the steps like

npm install primeng --save npm install primeui --save

I need a drop down, so I have added

import { DropdownModule } from 'primeng/primeng'; in to my main module.ts file followed by imports:[DropdownModule].

Then styles added in to the .angular-cli.json file like

"../node_modules/primeng/resources/themes/omega/theme.scss", "../node_modules/primeng/resources/primeng.min.scss".

I used .SCSS file for styling. I have added dropdown in to my html

<p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"></p-dropdown>

My issue is style is not reflected into the page and showing the following error when I click on the drop down.

ERROR TypeError: Cannot read property 'style' of undefined

Vimal
  • 2,081
  • 2
  • 14
  • 23

1 Answers1

2

1 - First create a project with angular cli, using sass (or adjust an existing one, when using css-setup) with following command:

 - ng new project --style=scss

2 - Get the needed packages to work with PrimeNg

 - npm install primeng –-save
 - npm install font-awesome --save

3- Adjust the styles.scss, by importing the needed css and scss 

 -  @import 
    "../node_modules/font-awesome/css/font-awesome.min.css", //is used by the style of ngprime
    "../node_modules/primeng/resources/primeng.min.css", // this is needed for the structural css
    "../node_modules/primeng/resources/themes/omega/theme.scss", // this is the scss file of one of the 16 free styles of ngprime.

4 - You can adjust scss variables in '../node_modules/primeng/resources/themes/omega/theme.scss' if needed. The dropdown will be adjusted accordingly.

Here you can find a the style of the dropdown

free
  • 135
  • 2
  • 17