mat-tristate-checkbox

<mat-tristate-checkbox> provides the same functionality as the Angular Material checkbox enhanced with 3 states.

Release hints

Starting with version 16 this package is unscoped (i.e. is named 'mat-image-overflow' not '@bepo65/mat-image-overflow').

Prerequisites

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

Installation of checkbox

npm install mat-tristate-checkbox

Sample usage of checkbox

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

import { MatTristateCheckboxComponent } from 'mat-tristate-checkbox';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    MatTristateCheckboxComponent
  ],
  ...
})
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

Try out the demo page.

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

Changelog

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

License

Copyright © 2023 Bernhard Pottler.

This project and its packages are released under MIT license.