1.0.1 • Published 2 years ago
ngx-checkbox v1.0.1
NgxCheckbox
Implement a custom Checkbox compatible with all the browsers. Set your icon and style.
Demo: https://stackblitz.com/edit/ngx-checkbox
Getting Started
Install ngx-checkbox
from npm
:
npm i ngx-checkbox
Add to NgModule imports:
import { NgxCheckboxModule } from 'ngx-checkbox';
@NgModule({
...
imports: [NgxCheckboxModule,...]
...
})
API:
Add component to your page:
<!-- Example with FontAwesome icon-->
<ngx-checkbox [iconClass]="'fas fa-check'"> </ngx-checkbox>
<!-- Example with FontAwesome icon && Output when is Clicked-->
<ngx-checkbox [iconClass]="'fas fa-check'" (isClicked)="myFunction($event)"> </ngx-checkbox>
Output when is Clicked && Clicked by default (true/false)
<!-- Example with FontAwesome icon -->
<ngx-checkbox [iconClass]="'fas fa-check'" [isChecked]="true" (isClicked)="myFunction($event)"> </ngx-checkbox>
Add a class when is Checked and when is not Checked.
<!-- Example with FontAwesome icon -->
<!--HTML-->
<ngx-checkbox [iconClass]="'fas fa-check'"
[checkedClass]="'checkbox-checked'"
[nocheckedClass]="'checkbox-no-checked'"> </ngx-checkbox>
<!-- CSS -->
.checkbox-checked {
background-color: goldenrod;
border: 1px solid goldenrod;
border-radius: 2px;
}
.checkbox-no-checked {
background-color: grey;
border: 1px solid grey;
border-radius: 2px;
}
Add an ID to implement with a label.
<!-- Example with FontAwesome icon && Label by ID-->
<label for="my-checkbox-id" class="label-example">Label Checkbox</label>
<ngx-checkbox [iconClass]="'fas fa-check'" [id]="'my-checkbox-id'"> </ngx-checkbox>
Set Size
<!-- Example with FontAwesome icon -->
<ngx-checkbox [iconClass]="'fas fa-check'" [size]="25"></ngx-checkbox>
Handle it from your Component
<!-- HTML-->
<!-- Example with FontAwesome icon && Set clicked from Typescript-->
<ngx-checkbox [iconClass]="'fas fa-check'" #myCheckbox> </ngx-checkbox>
<div class="button-row">
<button mat-raised-button color="primary" (click)="onSetCheckBox()">Set clicked</button>
</div>
<!--Typescript-->
import { NgxCheckboxComponent } from 'ngx-checkbox';
export class AppComponent {
@ViewChild('myCheckbox') myCB: NgxCheckboxComponent;
onSetCheckBox() {
// Set true or false
this.myCB.setClick(true);
}
}
Credits
Martín, Carlos David - carlosdavidmartin@gmail.com