Selecting a value with ToggleButton and SelectButton

ToggleButton provides a way to select a Boolean value using a button. The ngModel directive is used to define a two-way data binding to a Boolean property. That is, preselection of the toggle button is achieved by enabling the Boolean property. A basic example of ToggleButton usage would be as follows:

<p-toggleButton [(ngModel)]="basic" name="basic"></p-toggleButton>

The following screenshot shows a snapshot result of the basic example:

The ToggleButton also provided customized options such as onLabel, offLabel, onIcon, and offIcon over default labels and icons. The label components associated with the toggle button need to trigger the focus of button while clicking on the label, this can be achieved with the inputId attribute. The customized toggle button with labels, icons, and events would be as follows:

<p-toggleButton [(ngModel)]="customized" name="custom" onLabel="I 
confirm"
offLabel="I reject" onIcon="fa-check-square"
offIcon="fa-window-close">
</
p-toggleButton>

In the preceding example, all kinds of font-awesome icons can be used for the icon attributes. The following screenshot shows a snapshot result of the customized example:

The user is notified of user actions using the onChange event. At the same time, user interactions are prevented using the disabled property.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.116.21.152