Input - ToggleButton - 《PrimeNG Document》

Documentation
Source

ToggleButtonToggleButton is used to select a boolean value using a button.

Documentation

Import


import {ToggleButtonModule} from 'primeng/togglebutton';

Getting Started

Two-way binding to a boolean property is defined using the standard ngModel directive.


<p-toggleButton [(ngModel)]="checked"></p-toggleButton>


export class ModelComponent {
    checked: boolean;
}

As model is two-way binding enabled, setting the bound value as true displays the state as checked.


export class ModelComponent {
   checked: boolean = true;
}

Model Driven Forms

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


<p-toggleButton formControlName="agreed"></p-toggleButton>

Labels

Labels are customized using onLabel and offLabel properties.


<p-toggleButton onLabel="I confirm" offLabel="I reject"
            onIcon="pi pi-check" offIcon="pi pi-times" [(ngModel)]="val"></p-toggleButton>

Icons

Icon on a ToggleButton is specified with the onIcon and offIcon properties and position is customized using the iconPos property.


<p-toggleButton onLabel="I confirm" offLabel="I reject" 
            onIcon="fa fa-check" offIcon="fa fa-times" iconPos="right" [(ngModel)]="val"></p-toggleButton>

Properties

Name	Type	Default	Description
onLabel	string	Yes	Label for the on state.
offLabel	string	No	Label for the off state.
onIcon	string	null	Icon for the on state.
offIcon	string	null	Icon for the off state.
iconPos	string	left	Position of the icon, valid values are "left" and "right".
style	string	null	Inline style of the element.
styleClass	string	null	Style class of the element.
disabled	boolean	false	When present, it specifies that the element should be disabled.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the focus input to match a label defined for the component.

Events

Name	Parameters	Description
onChange	event.originalEvent: browser event event.checked: boolean value to represent checked state.	Callback to invoke on state change.


<p-toggleButton (onChange)="handleChange($event)" [(ngModel)]="val">


export class ModelComponent {
    handleChange(e) {
        var isChecked = e.checked;
    }
}

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-togglebutton	Container element
ui-button-icon-left	Icon element.
ui-button-icon-right	Icon element.
ui-button-text	Label element.

Dependencies

None.

Source

View on GitHub


<h3 class="first">Basic - ({{checked1}})</h3>
<p-toggleButton [(ngModel)]="checked1" [style]="{'width':'150px'}"></p-toggleButton>
<h3>Customized - ({{checked2}})</h3>
<p-toggleButton [(ngModel)]="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{'width':'150px'}"></p-toggleButton>


export class ToggleButtonDemo {
    checked1: boolean = false;
    checked2: boolean = true;
}