bepo65-mat-tristate-checkbox

Welcome to @bepo65/mat-tristate-checkbox

<mat-tristate-checkbox> provides the same functionality as the Angular Material checkbox enhanced with 3 states. This repository contains the checkbox component and a demo project.

Prerequisites

The package can be used in Angular apps with Angular Material installed. This Version requires Angular 11.

Installation of checkbox

npm install @bepo65/mat-tristate-checkbox

Sample usage of checkbox

Now you can use the mat-tristate-checkbox component in your app components, for example in app.component.ts:

import { MatTristateCheckboxModule } from '@bepo65/mat-tristate-checkbox';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    MatTristateCheckboxModule
  ],
  ...
})
export class AppModule { }

And in template file app.component.html:

<form [formGroup]="form">
  <mat-tristate-checkbox formControlName="keepMeLoggedIn">remember me</mat-tristate-checkbox>
</form>

Demo project

There is a demo project on stackblitz that shows a simple use case.

Properties of checkbox

Name	Description
@Input() color: ThemePalette	Theme color palette for the component. Defaults to 'accent'
@Input() disabled: any	Whether the checkbox is disabled.
@Input() labelPosition: 'before' | 'after'	Whether the label should appear after or before the checkbox. Defaults to 'after'

Values of checkbox

The value aof the checkbox cycle through these values:

undefined > false > true

Usage of demo project

npm install
npm run start

Run all tests

npm run test

Changelog

For list of changes and bugfixes, see CHANGELOG.md.

Contributing

The CHANGELOG.md is generated with standard-changelog (npm run release). The following is the list of supported scopes:

• checkbox
• demo
• none/empty string: useful for test and refactor changes that are done across all packages (e.g. test: add missing unit tests) and for docs changes that are not related to a specific package (e.g. docs: fix typo in tutorial).

Release hints

Required versions (e.g. caused by version dependencies):

Package	Version	Remark
@angular-eslint/*	13.x.y	requires angular V13
@angular-eslint/*	13.x.y	requires eslint V8
@typescript-eslint/*	5.x.y	requires eslint V8

Updating to Angular V13 is still under construction.

Hacks

• ejs was installed to solve a dependency of '@angular-eslint/builder' found by github dependabot. Can be deleted from package.json, when '@angular-eslint/builder' is updated.

Author

Bernhard Pottler

on Github: @BePo65

License

Copyright © 2020 Bernhard Pottler.

This project and all of its packages are released under MIT license.