DEV Community

loading...
Cover image for Angular InputSwitch

Angular InputSwitch

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

<p-inputSwitch [(ngModel)]="checked"></p-inputSwitch>
Enter fullscreen mode Exit fullscreen mode
export class ModelComponent {

    checked: boolean;

}
Enter fullscreen mode Exit fullscreen mode

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;

}
Enter fullscreen mode Exit fullscreen mode

Model Driven Forms

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

<p-inputSwitch formControlName="enabled"></p-inputSwitch>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide