Angular PrimeNG Form TriStateCheckbox Properties

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the TriCheckbox component in Angular PrimeNG.

The TriCheckbox component is used to allow the user to make a checkbox with three states i.e. true, false & null conditions.

TriCheckbox Properties:

• name: It is used to give the name of the element. It is of string data type, the default value is null.
• label: It is used to give the Label of the element. It is of string data type, the default value is null.
• disabled: It is used to disable the element. It is of the boolean datatype, the default value is false.
• tabindex: It is used to set the Index of the element in tabbing order. It is of number datatype, the default value is null.
• inputId: It is an ID identifier of the underlying input element. It is of string data type, the default value is null.
• ariaLabelledBy: It is the ariaLabelBy property that establishes relationships between the component and label(s) where its value should be one or more element IDs. It is of string data type, the default value is null.
• style: It is used to give the Inline style of the component. It is of object data type, the default value is null.
• styleClass: It is the Style class of the component. It is of string data type, the default value is null.
• readonly: it specifies that the component cannot be edited. It is of the boolean datatype, the default value is false.
• checkboxTrueIcon: It is used to set the specified icon for checkbox true value. It is of string data type, the default value is pi pi-check.
• checkboxFalseIcon: It is used to set the specifies the icon for checkbox false value. It is of string data type, the default value is pi pi-check.

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure:

Example1: In the below code, we will be using the above variable to demonstrate the use of the  Form TriStateCheckbox Properties.

app.component.html

HTML

<div class="card" style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form TriStateCheckbox Properties</h4>
    <p-triStateCheckbox [(ngModel)]="value"></p-triStateCheckbox>
</div>

app.component.ts

Javascript

import { Component } from '@angular/core';
import { SelectItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    value: any;
}

app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TriStateCheckboxModule } from
    'primeng/tristatecheckbox';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TriStateCheckboxModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Example2: In the below code, we will be using the above variable to demonstrate the use of the  Form TriStateCheckbox Properties.

app.component.html

HTML

<div class="card" style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form TriStateCheckbox Properties</h4>
    <p-triStateCheckbox [(ngModel)]="value"
        disabled="true"></p-triStateCheckbox>
</div>

app.component.ts

Javascript

import { Component } from '@angular/core';
import { SelectItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    value: any;
}

app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TriStateCheckboxModule } from
    'primeng/tristatecheckbox';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TriStateCheckboxModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Reference: https://www.primefaces.org/primeng/tristatecheckbox