DEV Community

loading...
Cover image for Angular SelectButton

Angular SelectButton

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr to contact us.
・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

<p-selectButton [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-selectButton>
Enter fullscreen mode Exit fullscreen mode
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'}
        ];
    }

}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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'}
        ];
    }

}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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'}
        ];
    }

}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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}
        ];
    }

}
Enter fullscreen mode Exit fullscreen mode

Model Driven Forms

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

<p-selectButton [options]="cities" formControlName="selectedCity"></p-selectButton>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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'}
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

Forem Open with the Forem app