Selected Type: {{selectedType}}
Selected Types: {{selectedTypes}}
import {SelectButton} from 'primeng/primeng';
SelectButton requires a collection of options and a value to bind. Options should follow the SelectItem interface that defines label and value properties.
<p-selectButton [options]="cities" [(value)]="selectedCity"></p-selectButton>
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'});
}
}
SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array.
<p-selectButton [options]="cities" [(value)]="selectedCities"></p-selectButton>
import {SelectItem} from 'primeng/primeng';
export class MyModel {
cities: SelectItem[];
selectedCities: 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'});
}
}
Name | Type | Default | Description |
---|---|---|---|
options | array | null | An array of selectitems to display as the available options. |
value | any | false | Value of the component. |
multiple | boolean | false | When specified, allows selecting multiple values. |
tabindex | number | null | Index of the element in tabbing order. |
Name | Parameters | Description |
---|---|---|
onChange | event.originalEvent: browser event evebt.value: single value or an array of values that are selected |
Callback to invoke when value changes. |
PrimeUI SelectButton.
<h3 class="first">Single</h3>
<p-selectButton [options]="types" [(value)]="selectedType"></p-selectButton>
<p>Selected Type: {{selectedType}}</p>
<h3>Multiple</h3>
<p-selectButton [options]="types" [(value)]="selectedTypes" multiple="multiple"></p-selectButton>
<p>Selected Types: {{selectedTypes}}</p>
<hr />
<button type="button" (click)="clear()" pButton icon="fa-close">Clear</button>
export class SelectButtonDemo {
types: SelectItem[];
selectedType: string;
selectedTypes: string[] = ['Apartment','Studio'];
constructor() {
this.types = [];
this.types.push({label: 'Apartment', value: 'Apartment'});
this.types.push({label: 'House', value: 'House'});
this.types.push({label: 'Studio', value: 'Studio'});
}
clear() {
this.selectedType = null;
this.selectedTypes = [];
}
}