import {InputSwitch} from 'primeng/primeng';
InputSwitch is defined using p-inputSwitch element. Checked property supports two-way binding to retrieve and assign the model.
<p-inputSwitch [(checked)]="checked"></p-inputSwitch>
export class ModelComponent { checked: boolean; }
As model is two-way binding enabled, setting the bound value as true displays the state as checked by default.
export class ModelComponent { checked: boolean = true; }
Labels can be customized using onLabel and offLabel properties.
<p-inputSwitch onLabel="I confirm" offLabel="I reject" [(checked)]="val"></p-inputSwitch>
Name | Type | Default | Description |
---|---|---|---|
checked | boolean | false | Checked state of the component. |
onLabel | string | On | Label for the on state. |
offLabel | string | Off | Label for the off state. |
Name | Parameters | Description |
---|---|---|
onChange | event.originalEvent: browser event event.checked: checked state as a boolean |
Callback to invoke on state change. |
<p-inputSwitch (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-inputswitch | Container element |
ui-inputswitch-on | Checked state element. |
ui-inputswitch-off | Unchecked state element. |
jQuery, jQuery UI WidgetFactory API, PrimeUI Switch.
<h3 class="first">Basic - {{checked1}}</h3> <p-inputSwitch [(checked)]="checked1"></p-inputSwitch> <h3>Labels - <span> {{checked2}}</h3> <p-inputSwitch onLabel="Yes" offLabel="No" [(checked)]="checked2"></p-inputSwitch>
export class InputSwitchDemo { checked1: boolean = false; checked2: boolean = true; }