NgTriStateCheckbox

This is a three state checkbox for angular 9, which is easy to use and implement. It supports custom styling and can be easily modified.

It can be used to select some entries from a list and control those entries. The user can select / unselect all entries by one click.

Installation

It can be installed with npm or yarn

npm install @tarienna/ng-tri-state-checkbox --save

or:

yarn install @tarienna/ng-tri-state-checkbox

Add NgTriStateCheckboxModule to your module

To use the component you have to add the module "NgTriStateCheckboxModule" to your application.

import { NgModule } from '@angular/core';
import { NgTriStateCheckboxModule } from 'ng-tri-state-checkbox';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        // This modules are required to use the ngModel to access the the value of the checkbox
        FormsModule, 
        ReactiveFormsModule,
        // Simply add this module
        NgTriStateCheckboxModule 
    ],
})
export class AppModule { }

Usage

For a more complex implementation see the Sample application section in this documentation. First create the tree state checkbox:

<ng-tri-state-checkbox [(ngModel)]="checkedCountries" #myTriStateBox="ngTriStateCheckbox"></ng-tri-state-checkbox>

Then create the controllers with values:

<input type="checkbox" [ngTriStateControl]="myTriStateBox" [value]="{country: 'USA'}" [(ngModel)]="usaIsChecked">
<input type="checkbox" [ngTriStateControl]="myTriStateBox" [value]="{country: 'Germany'}" [(ngModel)]="germanyIsChecked">
<input type="checkbox" [ngTriStateControl]="myTriStateBox" [value]="{country: 'Great Britain'}" [(ngModel)]="greatBritainIsChecked">
...

API

NgTriStateCheckboxComponent

Typ: Component Tag: ng-tri-state-checkbox Export as: ngTriStateCheckbox

This component is the three (tri) state control. It will handle the ngTriStateControls and output their values.

ngModel

Typ: Template Tag Input: will be ignored at the moment Output: An array of values from the checked ngTriStateControl checkboxes.

checkboxClass

Typ: Template Tag Input: Checkbox class to use a custom theme

NgTriStateControlDirective

Typ: Directive Tag: ngTriStateControl Supported HTML Tags: input[type="checkbox"] Export as: ngTriStateControl Input: ngTriStateCheckbox Required tags: value

The value of this checkbox will only be added to the ngModel output of the connected "ngTriStateCheckbox", when this checkbox is checked.

value

Typ: Template Tag Input: The value of the connected ngTriStateCheckbox.

Custom styles

See the example style in: src/tri-state-checkbox-sample/src/app/basic-sample/basic-sample.component.scss. And the usage in the sunday src/tri-state-checkbox-sample/src/app/basic-sample/basic-sample.component.html checkbox.

To replace the default style for the component simply use the "checkboxClass" tag and set your css class.

<th scope="col">Sunday<br /><ng-tri-state-checkbox ... checkboxClass="tri-state-checkbox-sunday"></ng-tri-state-checkbox></th>

Sample application

The sample application's sourcecode can be found at: src/tri-state-checkbox-sample/.

Before you start

To run the sample application, you need to download the source code.

Download the source code

You can download the source code using git or as a zip. Descriptions are below.

Download the Source code with git

Before you download the source code create a new empty directory! Open the commandline in the created directory and check out the source code.

git clone https://github.com/tarienna/ng-tri-state-checkbox.git

Download the source code as zip

There is also the possibility to download the project as zip: Click here to download. After downloading you have to unzip the package.

Install the node packages

To install all dependencies execute the following command:

npm install

Start the Application

To run the sample application execute the following command:

npm run start:example