https://github.com/bepo65/mat-tristate-checkbox
3-state checkbox for Angular Material as library component with demo project
https://github.com/bepo65/mat-tristate-checkbox
angular
Last synced: about 1 year ago
JSON representation
3-state checkbox for Angular Material as library component with demo project
- Host: GitHub
- URL: https://github.com/bepo65/mat-tristate-checkbox
- Owner: BePo65
- License: mit
- Created: 2020-12-28T14:09:00.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-07-02T04:50:13.000Z (about 1 year ago)
- Last Synced: 2025-07-02T04:50:57.887Z (about 1 year ago)
- Topics: angular
- Language: TypeScript
- Homepage:
- Size: 10.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# mat-tristate-checkbox
[](https://github.com/kefranabg/readme-md-generator/blob/master/LICENSE)
> <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 16.
## Installation of checkbox
```sh
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:
```javascript
import { MatTristateCheckboxComponent } from 'mat-tristate-checkbox';
...
@NgModule({
declarations: [
AppComponent
],
imports: [
...
MatTristateCheckboxComponent
],
...
})
export class AppModule { }
```
And in template file app.component.html:
```html
remember me
```
## Demo project
Try out the [demo page](https://bepo65.github.io/mat-tristate-checkbox/).
## 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
```sh
npm install
npm run start
```
## Run all tests
```sh
npm run test
```
## Changelog
For list of changes and bugfixes, see [CHANGELOG.md](CHANGELOG.md).
## Release hints
Starting with version 16 the generated package on npm is unscoped (i.e. is named 'mat-image-overflow' not '@bepo65/mat-image-overflow').
## Contributing
## Changelog
The project uses 'standard-version' to create the changelog. To enable this system, commit messages are linted before commits are executed by git.
**The structure of commit messages is**:
```
```
**header**
```
():
```
type and scope
- build: Changes that affect the build system or external dependencies (example scope: npm)
- docs: Documentation only changes
- feat: A new feature
- fix: A bug fix
- perf: A code change that improves performance
- refactor: A code change that neither fixes a bug nor adds a feature
- test: Adding missing tests or correcting existing tests (example scopes: demo, lib, e2e)
**footer**
```
BREAKING CHANGE: ... (requires MAJOR in Semantic Versioning)
```
For details of the commit messages format see [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
## License
Copyright © 2024 [Bernhard Pottler](https://github.com/BePo65).
Distributed under the MIT License. See `LICENSE` for more information.
This project uses the fonts '[Roboto](https://fonts.google.com/specimen/Roboto/about)' and '[Material Icons](https://github.com/google/material-design-icons)' from the [Google Fonts Library](https://fonts.google.com/) that are licensed under the [Apache License Version 2.0](https://www.apache.org/licenses/LICENSE-2.0.txt).
## Hints
As `eslint` V9 is not supported by angular@17 and also requires a fundamental change to the configuration files, the update will be done in a later version.
As a consequence the package `eslint-plugin-cypress` cannot be updated to a version 4.x (as this version has a peerDependency of eslint >= 9).