mat-checklist is a npm package that brings together several checkboxes from @angular/material to make a checklist. This also allows checkboxes nesting:

1. Install Mat-Checklist and its dependencies

npm install --save @angular/material @angular/cdk @angular/animations @maarti/mat-checklist

2. Include a theme

In your /src/styles.css file, include one of Angular Material's prebuilt themes:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

If you are not using the Angular CLI, you can include a prebuilt theme via a <link> element in your index.html. For more information on theming and instructions on how to create a custom theme, see the theming guide.

3. Import the component modules:

import { ChecklistModule } from '@maarti/mat-checklist';
 // ...
@NgModule({
    // ...
imports: [
    // ...
    ChecklistModule],
})

component.html:

<mat-checklist [entries]="entries" #checklist></mat-checklist>
{{checklist.getValue() | json}}

component.ts:

import { ChecklistEntry } from '@maarti/mat-checklist';
  // ...
public entries: ChecklistEntry[] = [
  new ChecklistEntry('fruits', 'Fruits', undefined, [
    new ChecklistEntry('banana', 'Banana', false),
    new ChecklistEntry('apple', 'Apple', true),
    new ChecklistEntry('orange', 'Orange', false),
  ])];

For more examples, see the live demo.

The principle entity to pass in parameter to a checklist.

The main component. See getValue() method the get all the values of the checklist.

Run ng test to execute the unit tests via Karma.

• Angular - The web framework used
• Angular Material - Material Design components for Angular

1. Clone the repo: git clone https://github.com/Maarti/AngularMaterialChecklist.git
2. Install packages : npm install
3. Add your contribution
4. Submit a pull request

Bryan MARTINET

See also the list of contributors who participated in this project.

This project is licensed under the MIT License - see the LICENSE.md file for details