Custom Checkboxes with Angular 2+


Checkboxes with Angular 2+

This is a very simple library to create custom checkboxes with Angular 2+ projects.This library use pretty-checkbox to create the customs checkboxes.

The checkbox label is provided as the content to the <mat-checkbox> element. The label can be positioned before or after the checkbox by setting the labelPosition property to 'before' or 'after'.

If you don’t want the label to appear next to the checkbox, you can use aria-label or aria-labelledby to specify an appropriate label.

<mat-checkbox> is compatible with @angular/forms and supports both FormsModule and ReactiveFormsModule.

<mat-checkbox> supports an indeterminate state, similar to the native <input type="checkbox">. While the indeterminate property of the checkbox is true, it will render as indeterminate regardless of the checkedvalue. Any interaction with the checkbox by a user (i.e., clicking) will remove the indeterminate state.

The possible values are:

check

Toggle checked value of the checkbox, ignore indeterminate value. If the checkbox is in indeterminatestate, the checkbox will display as an indeterminate checkbox regardless the checked value.

Default behavior of mat-checkbox. Always set indeterminate to false when user click on the mat-checkbox. This matches the behavior of native <input type="checkbox">.

The <mat-checkbox> uses an internal <input type="checkbox"> to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the <mat-checkbox>element.

HTML

<ngx-checkbox [configuration]="jsonModel" [(ngModel)]="isSelected" name="isSelected"></ngx-checkbox>

PS: Use variable on ngModel as boolean.

Colors Available:

  • p-primary
  • p-success
  • p-danger
  • p-info
  • p-warning

For More queries Plugins Click


 

2 comments

  1. Wow that was strange. I just wrote an extremely long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyway, just wanted to say wonderful blog!|

Leave a Reply

Your email address will not be published. Required fields are marked *