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}