Primeng p-dropdown directive not displaying selected value

Question

I'm using primeng's dropdown directive to allow users to select appointment types for events going into a calendar app. The down arrow of the dropdown displays and when clicked on it allows users to select items from the list as normal, but there is no display area where the dropdown should show the selected item. I can verify that selecting an item works, and clicking an event, then clicking the dropdown arrow will show the correct item selected. Below are my ts, html, and css files for the component.

appointment-detail.component.ts:

import { Input, Component, Output, EventEmitter } from '@angular/core';
import { Event } from '../../shared'
import { Calendar, Button, Dropdown, SelectItem } from 'primeng/primeng'

@Component({
  moduleId: module.id,
  selector: 'appointment-detail',
  templateUrl: 'appointment-detail.component.html',
  styleUrls: ['appointment-detail.component.css'],
  directives: [Calendar, Button, Dropdown]
})
export class AppointmentDetailComponent {
  @Input() event;
  @Output() submitDetails: EventEmitter<any> = new EventEmitter();
  appointmentTypes: SelectItem[];

  constructor() {
    this.event = new Event();
    this.appointmentTypes = [];
    this.appointmentTypes.push({label: 'Select type:', value: ''})
    this.appointmentTypes.push({label: 'Meeting', value: 'Meeting'})
    this.appointmentTypes.push({label: 'Vacation', value: 'Vacation'})
    this.appointmentTypes.push({label: 'Other', value: 'Other'})
  }

  saveEvent() {
    this.submitDetails.emit({action: 'save', event: this.event});
  }

  deleteEvent() {
    this.submitDetails.emit({action: 'delete', event: this.event});
  }
}

appointment-detail.component.html:

<div class="modal-content" *ngIf="!event">Loading...</div>
<div class="modal-content" *ngIf="event">
  <h2 class="header"> Appointment Details </h2>
  <div class="ui-grid ui-grid-responsive ui-fluid">
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="vin">Title</label></div>
      <input class="ui-grid-col-6" pInputText id="title" [(ngModel)]="event.title" />
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="start">Start</label></div>
      <div class="ui-grid-col-6">
        <p-calendar id="start" dateFormat="yy-mm-dd" [(ngModel)]="event.start"></p-calendar>
      </div>
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="end">End</label></div>
      <div class="ui-grid-col-6">
        <p-calendar id="end" dateFormat="yy-mm-dd" [(ngModel)]="event.end" placeholder="Optional"></p-calendar>
      </div>
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="location">Location</label></div>
      <input class="ui-grid-col-6" id="location" [(ngModel)]="event.location" />
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="type">Type</label></div>
      <p-dropdown class="ui-grid-col-6" id="type" [options]="appointmentTypes" [(ngModel)]="event.type"></p-dropdown>
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="details">Details</label></div>
      <input class="ui-grid-col-6" pInputText id="details" [(ngModel)]="event.details" />
    </div>
  </div>
  <footer>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <span class="footer-padding"></span>
      <button class="footer-button" type="button" pButton icon="fa-check" (click)="saveEvent()" label="Save"></button>
      <button class="footer-button" type="button" pButton icon="fa-close" (click)="deleteEvent()" label="Delete"></button>
      <span class="footer-padding"></span>
    </div>
  </footer>
</div>

appointment-detail.component.css:

.header {
    text-align: center;
    margin: 15px;
}

.ui-grid-row {
    margin-bottom: 4px;
    margin-top: 4px;
}

.ui-dialog-buttonpane {
    padding: 3px;
    display: flex;
}

.footer-padding {
    flex: 4;
}

.footer-button {
    flex: 2;
}

Answer 1

Your error is in this row:

this.appointmentTypes.push({label: 'Select type:', value: ''})

If you want to show the dropdown selected value, the value of the default option has to be null:

this.appointmentTypes.push({label: 'Select type:', value: null})