Angular, PrimeNG - p-dropdown rendered unexpectedly

Question

I'm using PrimeNG in my Angular application. I'm intending to use the p-dropdown component, but it is rendering very strangely in my components.

This looks nothing like what they demonstrate in their documentation.

Here is package.json. (Perhaps Bootstrap and PrimeNG versioning are misaligned or some such?):

{
  "name": "soar",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "^8.0.2",
    "@angular/forms": "~7.2.0",
    "@angular/material": "^8.0.1",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@ng-bootstrap/ng-bootstrap": "^4.1.3",
    "@ngrx/effects": "^7.4.0",
    "@ngrx/store": "^7.4.0",
    "@ngrx/store-devtools": "^7.4.0",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.8.0",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "primeng": "^8.0.0",
    "quill": "^1.3.6",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@ngrx/schematics": "^7.4.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

Here is the markup:

 <form [formGroup]="registerForm">
    <div class="form-group">
      <p-dropdown [options]="productionSelectItems" formControlName="productionId"></p-dropdown>
    </div>
</form>

I am using Bootstrap app-wide, but I wouldn't imagine that'd be a problem. Full-disclosure: I'm not a UI/UX person, but I think this should instead be rendered as some sort of select element. What may be causing this and how do I fix it?

The data is not the problem. Hello World! here is one SelectItem I've hard-coded. It has a value of 1 and it's label is Hello World!

Answer 1

I solved this by importing PrimeNG and Primeicons styles into my project's styles.scss file:

@import "~primeng/resources/primeng.min.css"; 
@import "~primeicons/primeicons.css";

After having done this, the dropdown looks similar to how it is demonstrated in PrimeNG documentation: