[FIXED] 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.


<h5>PrimeNG dropdown component</h5>
    placeholder="Select a Language"
<button (click)="start()">Start</button>


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

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


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

enter image description here


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

Answered By – Stef 84

Answer Checked By – David Goodson (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published