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} |