Search code examples
angulardropdownprimeng

PrimeNg dropdown menu showing placeholder text next to the box, second box when made editable

As in title, the PrimeNg dropdown element behaves like this: it shows the placeholder text next to the dropdown box, and displays it in a second box when made editable. I'm looking for a way to make it behave like a normal dropdown menu. Code and image below.

Html-Code:

<h5>PrimeNG dropdown component</h5>
<div>
  <p-dropdown
    [options]="lang"
    [editable]="true"
    placeholder="Select a Language"
    [showClear]="true">
  </p-dropdown>
</div>
<button (click)="start()">Start</button>

ts-Code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'frontend';

  start(){}

  lang = [
    { name: "HTML" },
    { name: "ReactJS" },
    { name: "Angular" },
    { name: "Bootstrap" },
    { name: "PrimeNG" },
  ];
}

enter image description here

Solution

  • After some digging, it turned out the following was missing in the styles.css File - it worked afterwards

    @import '~primeicons/primeicons.css';
@import '~primeng/resources/primeng.min.css';
@import '../node_modules/primeng/resources/themes/saga-blue/theme.css';