npm

@maarti/mat-checklist
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Angular Material Checklist

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

Mat Checklist Demo

Getting started

Installing

  1. Install Mat-Checklist and its dependencies
npm install --save @angular/material @angular/cdk @angular/animations @maarti/mat-checklist
  1. 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.

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

Example of use

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.

Documentation

ChecklistEntry

The principle entity to pass in parameter to a checklist.

ChecklistComponent

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

Running unit tests

Run ng test to execute the unit tests via Karma.

Built With

Contributing

  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

Author

Bryan MARTINET

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

License

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

Package Sidebar

Install

npm i @maarti/mat-checklist

Weekly Downloads

11

Version

1.0.0

License

MIT

Unpacked Size

250 kB

Total Files

26

Last publish

Collaborators

  • maarti