A simple Angular directive to bind multiple `input[type="checkbox"]` controls to a single output array.
npm install angular-checklistA simple Angular directive to bind multiple input[type="checkbox"] controls
to a single output array.
``html`
`ts
@Component({
selector: 'demo',
template:
,`
})
export class DemoComponent {
list = [2]; // will auto-check pre-populated values
}
Install via NPM:
`
npm install --save angular-checklist
Or via Yarn:
`
yarn add angular-checklist
Import the dependency, then add to your NgModule's imports array.
`ts
import { ChecklistModule } from 'angular-checklist';
@NgModule({
imports: [
/ others /
ChecklistModule,
],
})
export class AppModule { }
`
Designed to effortlessly work with both one- and two-way binding syntaxes means
angular-checklist is immutable friendly.
#### Two-way binding
For standard forms, simply use Angular's two-way binding ("box of bananas")
syntax. This will update your list after every change.
`html`
[(checklist)]="list"
checklistValue="1" />
#### One-way binding
For finer control, use one-way binding syntax. $event will contain anlist
updated, shallow copy of .
`html`
[checklist]="list"
(checklistChange)="store.updateList($event)"
checklistValue="1" />
#### Looping and Object binding
angular-checklist works great with *ngFor. Remember to use brackets [] tochecklistValue
bind non-string s.
`html`
#### Limited selected items
You can limit the number of possibly selectable items by using the maxSelectedItems input. Default is -1, which mean no limit.
Note: this simply prevents further changes, it does not unselect old value(s).
`html``
- Inspired by the Vitalets checklist-model for Angular 1.
- A few core ideas taken from ng2-checklist