ng-checkall
Version:
A simple directive to "Check All" checkboxes behavior
82 lines (50 loc) • 2.66 kB
Markdown
# NgCheckall
How many times you had to deal with the behavior of a List or Table full of checkboxes and one checkbox at the top to "Check all" the others?
This Angular 4+ lib aims to encapsulate this logic and reduce development time, bugs and duplicated code.
## Demo
[Go to Demo](https://carlosasj.github.io/ng-checkall/)
## Installation
npm i --save ng-checkall
or
yarn add ng-checkall
## Usage
* Add `NgCheckallModule` to the Module you want to have this behavior
```js
import { NgCheckallModule } from 'ng-checkall';
@NgModule({
...
imports: [ NgCheckallModule ]
})
```
* Use it in your HTML elements, for example:
```html
<div checkContainer> <!-- You need a container to wrap your checkboxes -->
<div> <!-- Put a `checkAll` directive on the input that should behave as the "Checl All" checkbox -->
<input checkAll type="checkbox" name="checkAllStart" id="checkAllStart" [(ngModel)]="checkAll">
<label for="checkAllStart">Check All</label>
</div>
<hr>
<div *ngFor="let c of checkItems">
<!-- Put a `checkOne` directive on each item -->
<input checkOne type="checkbox" [name]="c.name" [id]="c.name" [disabled]="c.disabled" [(ngModel)]="c.checked">
<label [for]="c.name">{{c.name}}</label>
</div>
<hr>
<div> <!-- Accepts multiple 'Check All' -->
<input checkAll type="checkbox" name="checkAllEnd" id="checkAllEnd" [(ngModel)]="checkAll">
<label for="checkAllEnd">Check All</label>
</div>
</div>
```
## Common issues
* Programmatically setting the `checkAll` model will **not** mark all the checkboxes. Instead, prefer iterate over your items and marking all of them as `checked` (and then the `checkAll` model will be automatically marked)
* Right now, one container will handle all the checkboxes inside it, so it will **not** work properly if you have a Table where each column should be a container with its own `checkAll` and `checkOne` set of directives.
## Development server
Run `yarn start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Build
Run `yarn build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `yarn test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## For any questions, suggestions, or feature requests
Please, [file an issue](https://github.com/carlosasj/ng-checkall/issues) or fork then open a Pull Request.
###### This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.5.