Selected Cars: {{selectedCars}}
import {MultiSelect} from 'primeng/primeng';
Two-way value binding is defined using ngModel and multiselect requires a collection of options where each option should follow the SelectItem interface that defines label-value properties.
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities"></p-multiSelect>
import {SelectItem} from 'primeng/primeng';
export class MyModel {
cities: SelectItem[];
selectedCity: string[];
constructor() {
this.cities = [];
this.cities.push({label:'New York', value:'New York'});
this.cities.push({label:'Rome', value:'Rome'});
this.cities.push({label:'London', value:'London'});
this.cities.push({label:'Istanbul', value:'Istanbul'});
this.cities.push({label:'Paris', value:'Paris'});
}
}
MultiSelect can be used in a model driven form as well.
<p-multiSelect [options]="cities" formControlName="selectedCities"></p-multiSelect>
Name | Type | Default | Description |
---|---|---|---|
options | array | null | An array of selectitems to display as the available options. |
disabled | boolean | false | When present, it specifies that the element should be disabled. |
defaultLabel | string | Choose | Label to display when there are no selections. |
style | string | null | Inline style of the element. |
styleClass | string | null | Style class of the element. |
scrollHeight | string | 200px | Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. |
overlayVisible | boolean | false | Specifies the visibility of the options panel. |
Name | Parameters | Description |
---|---|---|
onChange | event.originalEvent: browser event event.value: Current selected values |
Callback to invoke when value changes. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-multiselect | Container element. |
ui-multiselect-label-container | Container of the label to display selected items. |
ui-multiselect-label-container | Label to display selected items. |
ui-multiselect-trigger | Dropdown button. |
ui-multiselect-filter-container | Container of filter input. |
ui-multiselect-panel | Overlay panel for items. |
ui-multiselect-items | List container of items. |
ui-multiselect-item | An item in the list. |
Native component that requires the css of PrimeUI MultiSelect.
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>
<p>Selected Cars: {{selectedCars}}</p>
export class MultiSelectDemo {
cars: SelectItem[];
selectedCars: string[] = [];
constructor() {
this.cars = [];
this.cars.push({label: 'Audi', value: 'Audi'});
this.cars.push({label: 'BMW', value: 'BMW'});
this.cars.push({label: 'Fiat', value: 'Fiat'});
this.cars.push({label: 'Ford', value: 'Ford'});
this.cars.push({label: 'Honda', value: 'Honda'});
this.cars.push({label: 'Jaguar', value: 'Jaguar'});
this.cars.push({label: 'Mercedes', value: 'Mercedes'});
this.cars.push({label: 'Renault', value: 'Renault'});
this.cars.push({label: 'VW', value: 'VW'});
this.cars.push({label: 'Volvo', value: 'Volvo'});
}
}