Componente TriCheckbox de PrimeNG de Angular

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente TriCheckbox en Angular PrimeNG.

Componente TriCheckbox: permite a un usuario crear una casilla de verificación con tres estados, es decir, condiciones verdaderas, falsas y nulas.

Propiedades:

• name : Se utiliza para dar el nombre del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
• label : Se utiliza para dar la Etiqueta del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
• disabled : Se utiliza para deshabilitar el elemento. Es del tipo de datos booleano, el valor predeterminado es falso.
• tabindex : se utiliza para establecer el índice del elemento en orden de tabulación. Es de tipo de datos numérico, el valor predeterminado es nulo.
• inputId : es un identificador de ID del elemento de entrada subyacente. Es de tipo de datos de string, el valor predeterminado es nulo.
• ariaLabelledBy : Es la propiedad ariaLabelBy que establece relaciones entre el componente y la(s) etiqueta(s) donde su valor debe ser uno o más ID de elementos. Es de tipo de datos de string, el valor predeterminado es nulo.
• style : Se utiliza para dar el estilo Inline del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• styleClass : Es la clase Style del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• readonly : especifica que el componente no se puede editar. Es del tipo de datos booleano, el valor predeterminado es falso.
• checkboxTrueIcon : se utiliza para establecer el icono especificado para el valor verdadero de la casilla de verificación. Es de tipo de datos de string, el valor predeterminado es pi pi-check.
• checkboxFalseIcon : se utiliza para establecer el icono específico para el valor falso de la casilla de verificación. Es de tipo de datos de string, el valor predeterminado es pi pi-check.

Evento:

• onChange: es una devolución de llamada que se activa al cambiar el valor.

Estilo:

• p-chkbox: Es un elemento contenedor.
• p-tristatechkbox: Es un elemento contenedor.
• p-chkbox-box: Es un contenedor del icono.
• p-chkbox-icon: Es un elemento icono.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

  ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

  cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto: se verá así:

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente TriCheckbox. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG TriCheckbox component</h5>
<p-triStateCheckbox label="Enabled Checkbox"></p-triStateCheckbox>
  
<p-triStateCheckbox
  disabled="true"
  label="Disabled Checkbox">
</p-triStateCheckbox>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
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 {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad readonly y style en el componente triCheckbox.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG TriCheckbox component</h5>
<p-triStateCheckbox label="Enabled Checkbox"></p-triStateCheckbox>
  
<p-triStateCheckbox
  readonly="true"
  label="Readonly Checkbox">
</p-triStateCheckbox>
  
<p-triStateCheckbox
  readonly="true"
  style="border: 5px dotted">
</p-triStateCheckbox>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
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 {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/tristatecheckbox