Search code examples
angulardropdownprimeng

PrimeNG 6 dropdown not correctly showed

I migrated to PrimeNG 6.1.7 and I've a problem with p-dropdown. This is my code import in app.module (taken from a simple example):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {DropdownModule} from 'primeng/dropdown'; // include this for dropdown support
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropdownModule // dropdown support
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        []

})
export class AppModule { }

In app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  employes: SelectItem[];
  selectedEmploye: any;  

  constructor(){
    this.employes = [
      {label:'Select Employee', value:null},
      {label:'Franc', value:1},
      {label:'Kiran', value:2},
      {label:'John', value:3},
    ];
  }
ngOnInit(){
}
}

And in html I've:

<p-dropdown employes="" ngmodel="" options="" selectedemploye=""></p-dropdown>
Selected Employee: {{selectedEmploye }}

I also installed primeicons e imported it in angular.json:

...
"styles": [
   "src/styles.css",
   "node_modules/primeicons/primeicons.css"
],
...

Dropdown is not correctly showed: enter image description here

Any suggestion? Very thanks...

Solution

  • the correct html to use the primeng dropdown in that case should be:

    <p-dropdown [options]="employes" [(ngModel)]="selectedEmploye"></p-dropdown>

    If after that correction the dropdown doesn't look fine, then you have to take a look on how you installed the primeng library and if the styles are configured propertly and imported in your index.html (https://www.primefaces.org/primeng/#/setup)

    <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />