# ngx-checkbox-list

> Checkbox list form control for Angular X

Latest version **2.0.2** (published 2019-10-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install ngx-checkbox-list
pnpm add ngx-checkbox-list
yarn add ngx-checkbox-list
bun add ngx-checkbox-list
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2019-10-13 |
| First published | 2019-10-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | iamthes |
| Keywords | form-control, checkbox-list |

## Links

- npm: https://www.npmjs.com/package/ngx-checkbox-list
- npm.io page: https://npm.io/package/ngx-checkbox-list

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2019-10-13
- 2.0.1 — 2019-10-12
- 2.0.0 — 2019-10-11

## README

# ngx-checkbox-list

Checkbox list form control for Angular X

```ts
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Input, Component, forwardRef } from '@angular/core';
import { Option } from './option';

@Component({
    selector: 'ngx-checkbox-list',
    // eslint-disable-next-line @typescript-eslint/no-use-before-define
    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxListComponent), multi: true }],
    template: `
        <div [ngClass]="classList">
            <div [class]="itemClassName" *ngFor="let o of options; let i = index">
                <input
                    type="checkbox"
                    [value]="o.value"
                    [checked]="checked(o.value)"
                    [attr.id]="name + i"
                    (change)="change($event)"
                />
                <label [attr.for]="name + i">{{ o.label }}</label>
            </div>
        </div>
    `,
})
export class CheckboxListComponent implements ControlValueAccessor {
    /**
     * Used as prefix to generate unique label/id
     */
    @Input() name = '';
    /**
     * Key/value pairs to produce ui option label and value
     */
    @Input() options: Option[];
    /**
     * Used to format returning value as object of ids
     */
    @Input() objectId?: string;
    @Input() classList: string[] | string = 'checkbox-list';
    /**
     * Name of propery for case when need return object with ids
     */
    @Input() objectKey?: string;

    /**
     * Input/label will be wrapped into div with this class name
     */
    @Input() itemClassName = '';

    private value?: string[];
    private onTouched: (_: unknown) => void;
    private onChange: (_: unknown) => void;

    /**
     * Checks if value is selected (checkbox will be mark as checked)
     */
    checked(value: unknown): boolean {
        if (!this.value) {
            return false;
        }
        return this.value.includes(String(value));
    }

    /**
     * Called when one of checkbox value changed
     */
    change(event: Event) {
        const input = event.target as HTMLInputElement;
        const inputValue = String(input.value);
        if (!Array.isArray(this.value)) {
            this.value = [];
        }
        this.value = input.checked ? [...this.value, inputValue] : this.value.filter(v => v !== inputValue);
        let formValue: unknown[] = this.value;
        if (this.objectId && this.objectKey) {
            // If objectId and objectKey are defined, we return {[objectId]: value, [objectKey]: label }[]
            const id = this.objectId;
            const name = this.objectKey;
            // Converts array of values to array of objects.
            formValue = this.options
                .filter(o => (this.value as string[]).includes(String(o.value)))
                .map(o => ({ [id]: o.value, [name]: o.label }));
        } else if (this.objectId) {
            // If objectId is defined, we return { [id]: o.value  }[]
            const id = this.objectId;
            formValue = this.options
                .filter(o => (this.value as string[]).includes(String(o.value)))
                .map(o => ({ [id]: o.value }));
        } else {
            formValue = formValue.filter((value, index, self) => index === self.findIndex(other => other === value));
        }
        this.onChange(formValue);
    }

    // Form ControlValueAccessor interface

    /**
     * Write a new value to the element
     */
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    writeValue(value: any) {
        if (!Array.isArray(value)) {
            value = value ? [] : null; // eslint-disable-line @typescript-eslint/tslint/config
            // eslint-disable-next-line wix-editor/prefer-ternary
        } else if (this.objectId) {
            value = value.map(v => String(v[this.objectId as string]));
        } else {
            value = value.map(v => String(v)); // eslint-disable-line @typescript-eslint/tslint/config
        }
        this.value = value;
    }

    /**
     * Set the function to be called when the control receives a change event
     */
    registerOnChange(fn: (_: unknown) => void) {
        this.onChange = fn;
    }

    /**
     * Set the function to be called when the control receives a touch event
     */
    registerOnTouched(fn: (_: unknown) => void) {
        this.onTouched = fn;
    }
}
```

---
_Source: https://npm.io/package/ngx-checkbox-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._