Mat-tristate-checkbox NPM

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.

Screenshot

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'