I use the primeng drop-down directive so that users can select appointment types for events included in the calendar application. The down arrow of the drop-down menu and when you click on it allows users to select items from the list as usual, but there is no display area in which the drop-down list should show the selected item. I can verify that the item selection is working, and by clicking the event, then clicking the down arrow, the correct selected item will be displayed. Below are the ts, html and css files for the component.
destination-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});
}
}
destination-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>
destination-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;
}