Angular ToggleButton

Angular ToggleButton is used to select a boolean value using a button.

Setup

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

Import

import {ToggleButtonModule} from 'primeng/togglebutton';

Getting Started

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;}

Model Driven Forms

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

<p-toggleButton formControlName="agreed"></p-toggleButton>

Labels

Labels are customized using onLabel and offLabel properties.

<p-toggleButton onLabel="I confirm" offLabel="I reject"            onIcon="pi pi-check" offIcon="pi pi-times" [(ngModel)]="val"></p-toggleButton>

Icons

Icon on a ToggleButton is specified with the onIcon and offIcon properties and position is customized using the iconPos property.

<p-toggleButton onLabel="I confirm" offLabel="I reject"             onIcon="pi pi-check" offIcon="pi pi-times" iconPos="right" [(ngModel)]="val"></p-toggleButton>

Theming

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

Resources

Visit the PrimeNG ToggleButton showcase for demos and documentation.