import {ToggleButton} from 'primeng/primeng';
ToggleButton is defined using p-toggleButton element. Checked property supports two-way binding to retrieve and assign the model.
<p-toggleButton [(checked)]="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; }
Icons and Labels can be customized using onLabel, offLabel, onIcon and OffIcon attributes.
<p-toggleButton onLabel="I confirm" offLabel="I reject" onIcon="fa-check-square" offIcon="fa-square" [(checked)]="val"></p-toggleButton>
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. |
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. |
Name | Parameters | Description |
---|---|---|
onChange | event.originalEvent: browser event evebt.checked: boolean value to represent checked state. |
Callback to invoke on state change. |
<p-toggleButton (onChange)="handleChange($event)" [(checked)]="val">
export class ModelComponent { handleChange(e) { var isChecked = e.checked; } }
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-text | Label element. |
jQuery, jQuery UI WidgetFactory API, PrimeUI ToggleButton.
<h3 class="first">Basic - ({{checked1}})</h3> <p-toggleButton [(checked)]="checked1" style="width:150px"></p-toggleButton> <h3>Customized - ({{checked2}})</h3> <p-toggleButton onLabel="I confirm" offLabel="I reject" onIcon="fa-check-square" offIcon="fa-square" [(checked)]="checked2" style="width:150px"></p-toggleButton>
export class ToggleButtonDemoComponent { checked1: boolean = false; checked2: boolean = true; }