Selected Type: {{selectedType}}
Selected Types: {{type}}
import {SelectButton} from 'primeng/primeng';
Two-way value binding is defined using ngModel and selectbutton requires a collection of options where each option should follow the SelectItem interface that defines label-value properties.
<p-selectButton [options]="cities" [(ngModel)]="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" [(ngModel)]="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'});
}
}
SelectButton can be used in a model driven form as well by defining ngFormControl or ngControl.
<p-selectButton [options]="cities" ngControl="selectedCity"></p-selectButton>
Name | Type | Default | Description |
---|---|---|---|
options | array | null | An array of selectitems to display as the available options. |
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" [(ngModel)]="selectedType"></p-selectButton>
<p>Selected Type: {{selectedType}}</p>
<h3>Multiple</h3>
<p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
<p>Selected Types: <span ngFor="let 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 = [];
}
}