Selected Type: {{selectedType}}
Selected Types: {{type}}
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 instance that is not null or undefined.
<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. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Name | Parameters | Description |
---|---|---|
onChange | event.originalEvent: browser event event.value: single value or an array of values that are selected |
Callback to invoke when value changes. |
Native component that requires css of 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: <span *ngFor="#type of selectedTypes">{{type}} </span></p>
<hr />
<button type="button" (click)="clear()" pButton icon="fa-close" label="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 = [];
}
}