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. |
jQuery, jQuery UI WidgetFactory API, 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 SelectbuttonDemoComponent { 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 = []; } }