Input - SelectButton - 《PrimeNG Document》

Documentation
Source

SelectButtonSelectButton is used to choose single or multiple items from a list using buttons.

Documentation

Import


import {SelectButtonModule} from 'primeng/selectbutton';

Getting Started

SelectButton requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.


<p-selectButton [options]="cities1" [(ngModel)]="selectedCity1"></p-selectButton>
<p-selectButton [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-selectButton>


import {SelectItem} from 'primeng/api';
export class MyModel {
    cities1: SelectItem[];
    cities2: City[];
    selectedCity1: City;
    selectedCity2: City;
    constructor() {
      //SelectItem API with label-value pairs
      this.cities1 = [
          {label:'Select City', value:null},
          {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
          {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
          {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
          {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}}
          {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
      ];
      //An array of cities
      this.cities2 = [
          {name: 'New York', code: 'NY'},
          {name: 'Rome', code: 'RM'},
          {name: 'London', code: 'LDN'},
          {name: 'Istanbul', code: 'IST'},
          {name: 'Paris', code: 'PRS'}
      ];
    }
}

Multiple

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" multiple="multiple" ></p-selectButton>


import {SelectItem} from 'primeng/api';
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'});
    }
}

Model Driven Forms

SelectButton can be used in a model driven form as well.


<p-selectButton [options]="cities" formControlName="selectedCity"></p-selectButton>

Icons

Button options can display icons using the icon property of the SelectItem API.


<p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>


export class SelectButtonDemo {
    types: SelectItem[];
    selectedType: string;
    constructor() {
        this.types = [];
        this.types.push({title: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'});
        this.types.push({title: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'});
        this.types.push({title: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'});
    }
}

Disabled Options

Particular options can be prevented from selection using the disabled property of SelectItem API.

Templating

Items support templating to display custom content inside the buttons using an ng-template that receives the option as the implicit variable. Note that if an arbitrary object is used as the option instead of the SelectItem API, internally they are converted to SelectItems which means in the template the arbitrary object can be access using the value property.


<p-selectButton [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name">
    <ng-template let-item>
        <img src="assets/showcase/images/demo/flag/{{item.value.flag}}" />
        <span>{{item.name}}</span>
    </ng-template>
</p-selectButton>


export class SelectButtonDemo {
    countries: any[];
    selectedCountry: any;
    constructor() {
        this.countries = [
            {name: 'USA', flag: 'usa.png'},
            {name: 'Germany', flag: 'germany.png'},
            {name: 'Japan', flag: 'japan.png'}
        ];
    }
}

Properties

Name	Type	Default	Description
options	array	null	An array of selectitems to display as the available options.
optionLabel	string	null	Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
multiple	boolean	false	When specified, allows selecting multiple values.
tabindex	number	0	Index of the element in tabbing order.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
disabled	boolean	false	When present, it specifies that the element should be disabled.
dataKey	string	null	A property to uniquely identify a value in options.

Events

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.
onOptionClick	event.originalEvent: browser event event.option: SelectItem instance of the clicked button event.index: Index of the clicked button	Callback to invoke when a button is clicked.

Dependencies

None.

Source

View on GitHub


<h3 class="first">Single</h3>
<p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>
<p>Selected Type: <span style="font-weight: bold">{{selectedType}}</span></p>
<h3>Multiple</h3>
<p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
<p>Selected Types: <span style="font-weight: bold" *ngFor="let type of selectedTypes">{{type}} </span></p>
<h3>Icon Only</h3>
<p-selectButton [options]="modes" [(ngModel)]="selectedModes" multiple="multiple"></p-selectButton>
<p>Selected Modes: <span style="font-weight: bold" *ngFor="let mode of selectedModes">{{mode}} </span></p>
<h3>Custom Template</h3>
<p-selectButton [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name">
    <ng-template let-item>
        <div style="padding: .5em 1em">
            <img style="vertical-align: middle; margin-right: .5em" src="assets/showcase/images/demo/flag/{{item.value.flag}}" height="20px"/>
            <span>{{item.name}}</span>
        </div>
    </ng-template>
</p-selectButton>
<p>Selected Country: <span style="font-weight: bold">{{selectedCountry?.name}}</span></p>
<hr>
<button type="button" (click)="clear()" pButton icon="pi pi-times" label="Clear"></button>


export class SelectButtonDemo {
    types: SelectItem[];
    selectedType: string;
    selectedTypes: string[] = ['PayPal','MasterCard'];
    selectedModes: string[];
    modes: SelectItem[];
    countries: any[];
    selectedCountry: any;
    constructor() {
        this.types = [
            {label: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'},
            {label: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'},
            {label: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'}
        ];
        this.modes = [
            {value: 'Bold', title: 'Bold', icon: 'fa fa-fw fa-bold'},
            {value: 'Italic', title: 'Italic', icon: 'fa fa-fw fa-italic'},
            {value: 'Underline', title: 'Underline', icon: 'fa fa-fw fa-underline'}
        ];
        this.countries = [
            {name: 'USA', flag: 'usa.png'},
            {name: 'Germany', flag: 'germany.png'},
            {name: 'Japan', flag: 'japan.png'}
        ];
    }
    clear() {
        this.selectedType = null;
        this.selectedTypes = [];
        this.selectedModes = [];
        this.selectedCountry = null;
    }
}