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/togg…


This content originally appeared on DEV Community and was authored by PrimeTek

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

Getting Started

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

<p-toggleButton [(ngModel)]="checked"></p-toggleButton>
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.

export class ModelComponent {

   checked: boolean = true;

}
Enter fullscreen mode Exit fullscreen mode

Model Driven Forms

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

<p-toggleButton formControlName="agreed"></p-toggleButton>
Enter fullscreen mode Exit fullscreen mode

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

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

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.


This content originally appeared on DEV Community and was authored by PrimeTek


Print Share Comment Cite Upload Translate Updates
APA

PrimeTek | Sciencx (2021-02-23T16:47:01+00:00) Angular ToggleButton. Retrieved from https://www.scien.cx/2021/02/23/angular-togglebutton/

MLA
" » Angular ToggleButton." PrimeTek | Sciencx - Tuesday February 23, 2021, https://www.scien.cx/2021/02/23/angular-togglebutton/
HARVARD
PrimeTek | Sciencx Tuesday February 23, 2021 » Angular ToggleButton., viewed ,<https://www.scien.cx/2021/02/23/angular-togglebutton/>
VANCOUVER
PrimeTek | Sciencx - » Angular ToggleButton. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/23/angular-togglebutton/
CHICAGO
" » Angular ToggleButton." PrimeTek | Sciencx - Accessed . https://www.scien.cx/2021/02/23/angular-togglebutton/
IEEE
" » Angular ToggleButton." PrimeTek | Sciencx [Online]. Available: https://www.scien.cx/2021/02/23/angular-togglebutton/. [Accessed: ]
rf:citation
» Angular ToggleButton | PrimeTek | Sciencx | https://www.scien.cx/2021/02/23/angular-togglebutton/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts