Angular SelectButton

Angular SelectButton is a form component to choose a value from a list of options using button elements.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {SelectButtonModule} from 'primeng/selectbutton';

Getting Started

SelectButton requires a value to bind and a collection of options.

<p-selectButton [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-selectButton>

interface City {
    name: string,
    code: string
}

export class SelectButtonDemo {

    cities: City[];

    selectedCity: City;

    constructor() {
        this.cities = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];
    }

}

Value Binding

The option itself is bound to the model by default, use optionValue to customize the property to pass as the value.

<p-selectButton [options]="cities" [(ngModel)]="selectedCityCode" optionLabel="name" optionValue="code"></p-selectButton>

export class SelectButtonDemo {

    cities: City[];

    selectedCityCode: string;

    constructor() {
        this.cities = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];
    }

}

Selection

SelectButtons allows selection of either single or multiple items, this behavior is defined with the multiple property. In single case, model should be a single object reference whereas in multiple case should be an array.

<p-selectButton [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" [multiple]="true"></p-selectButton>

export class SelectButtonDemo {

    cities: City[];

    selectedCities: City[];

    constructor() {
        this.cities = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];
    }

}

Disabled Options

Particular options can be prevented from selection using the optionDisabled property.

<p-selectButton [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" optionDisabled="inactive"></p-selectButton>

export class SelectButtonDemo {

    cities: City[];

    selectedCity: City;

    constructor() {
        this.cities = [
            {name: 'New York', code: 'NY', inactive: false},
            {name: 'Rome', code: 'RM', inactive: true},
            {name: 'London', code: 'LDN', inactive: false},
            {name: 'Istanbul', code: 'IST', inactive: true},
            {name: 'Paris', code: 'PRS', inactive: false}
        ];
    }

}

Model Driven Forms

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

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

Custom Content

For custom content support define a ng-template where the local ng-template variable refers to an option in the options collection.

<p-selectButton [options]="justifyOptions" [(ngModel)]="value">
    <ng-template let-item>
        <i [class]="item.icon"></i>
    </ng-template>
</p-selectButton>

export class SelectButtonDemo {

    justifyOptions: any[];

    value: any;

    constructor() {    
        this.justifyOptions = [
            {icon: 'pi pi-align-left', justify: 'Left'},
            {icon: 'pi pi-align-right', justify: 'Right'},
            {icon: 'pi pi-align-center', justify: 'Center'},
            {icon: 'pi pi-align-justify', justify: 'Justify'}
        ];
    }
}

Theming

SelectButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG SelectButton showcase for demos and documentation.