import {ToggleButton} from 'primeng/primeng';
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;
}
ToggleButton can be used in a model driven form as well by defining ngFormControl or ngControl.
<p-toggleButton ngControl="agreed"></p-toggleButton>
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" [(ngModel)]="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)" [(ngModel)]="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. |
Native component that requires the css of PrimeUI ToggleButton.
<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="fa-check-square" offIcon="fa-square" [style]="{'width':'150px'}"></p-toggleButton>
export class ToggleButtonDemo {
checked1: boolean = false;
checked2: boolean = true;
}