Angular InputSwitch

Angular InputSwitch is used to select a boolean value.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {InputSwitchModule} from 'primeng/inputswitch';

Getting Started

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

<p-inputSwitch [(ngModel)]="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;

}

Model Driven Forms

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

<p-inputSwitch formControlName="enabled"></p-inputSwitch>

Theming

InputSwitch supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG InputSwitch showcase for demos and documentation.