AngularMultiCheckbox
This library was generated with Angular CLI version 10.0.5.
Update: This library is Ivy Compatible and is tested against an Angular 10 app.
Installation
npm i angular-multi-checkbox
API
import { AngularMultiCheckboxModule } from 'angular-multi-checkbox'
selector: 'angular-multi-checkbox'
Importing The 'angular-multi-checkbox' Module
import { AngularMultiCheckboxModule } from 'angular-multi-checkbox'; @NgModule({ declarations: [ ... ], imports: [ AngularMultiCheckboxModule, ... ], providers: [], bootstrap: [...]}) export class AppModule { }
Enabling Multi-checkbox
<angular-multi-checkbox [items]="items" [displayName]="'name'" [checkedName]="'isChecked'" [disabledName]="'isDisabled'" (checked)="onCheckboxChecked($event)"> </angular-multi-checkbox>
Input data sample:
export class AppComponent { title = 'my-workspace'; items = [ { name: 'Monday', isChecked: true, }, { name: 'Tuesday', isChecked: true, }, { name: 'Wednesday', isChecked: true, }, { name: 'Thursday', isChecked: false, }, { name: 'Friday', isChecked: false, }, { name: 'Saturday', isChecked: true, isDisabled: true, }, { name: 'Sunday', isChecked: false, isDisabled: true, } ]; onCheckboxChecked({isChecked, item}): void { const index = this.items.findIndex(e => e.name === item.name); this.items[index].isChecked = isChecked; }}
@Inputs()
Input | Type | Required | Description |
---|---|---|---|
items | object array | YES, default: [] | The list of items. |
displayName | string | YES , default: '' | Display name on an item. |
checkedName | string | YES , default: '' | Attribute represent "checked" property. |
disabledName | string | Optional, default: '' | Attribute represent "disabled". |
@Outputs()
Output | Type | Required | Description |
---|---|---|---|
checked | EventEmitter | YES | emits checked data {isChecked: boolean, item: any} |