0.0.3 • Published 4 years ago
angular-multi-checkbox v0.0.3
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} |