Componente ListBox de PrimeNG 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 ListBox en Angular PrimeNG.

Componente ListBox: Se utiliza para hacer un componente de lista desde el cual podemos seleccionar uno o más elementos y también se puede descartar si el elemento no se requiere desmarcando la lista.

Propiedades:

• ariaFilterLabel : se utiliza para definir una string que etiqueta el elemento de filtro de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• casilla de verificación : se utiliza para permitir seleccionar elementos con casillas de verificación. Es de tipo de dato booleano, el valor por defecto es false.
• dataKey : Es la propiedad que se utiliza para identificar una opción. Es de tipo de datos de string, el valor predeterminado es nulo.
• disabled : Especifica que el elemento debe estar deshabilitado. Es del tipo de dato booleano, el valor por defecto es false.
• filtro : se utiliza para mostrar una entrada de filtro en el encabezado. Es de tipo de dato booleano, el valor por defecto es false.
• filterMatchMode : se utiliza para definir cómo se filtran los elementos. Es de tipo de datos de string, el valor predeterminado está contenido.
• filterValue : se utiliza para especificar pantallas de filtro con este valor. Es de tipo de datos de string, el valor predeterminado es nulo.
• filterLocale : se utiliza para establecer la configuración regional que se utilizará en el filtrado. Es de tipo de datos de string, el valor predeterminado es indefinido.
• filterPlaceHolder : se utiliza para definir el marcador de posición de la entrada del filtro. Es de tipo de datos de string, el valor predeterminado es nulo.
• listStyle : se utiliza para establecer el estilo en línea del elemento de la lista, es de tipo de datos de string, el valor predeterminado es nulo.
• listStyleClass : se utiliza para establecer la clase de estilo del elemento de la lista, es de tipo de datos de string, el valor predeterminado es nulo.
• metaKeySelection : se utiliza para definir cómo se pueden seleccionar varios elementos. Es del tipo de dato booleano, el valor predeterminado es verdadero.
• multiple : Se utiliza para permitir seleccionar múltiples valores. Es del tipo de dato booleano, el valor por defecto es false.
• readonly : especifica que el valor del elemento no se puede cambiar. Es del tipo de dato booleano, el valor por defecto es false.
• mensaje vacío : se utiliza para configurar el texto que se mostrará cuando no haya datos. Es de tipo de datos de string, el valor predeterminado es no se encontraron registros.
• emptyFilterMessage : se utiliza para configurar el texto que se mostrará cuando el filtrado no arroja ningún resultado. Es del tipo de datos de string, el valor predeterminado es no se encontraron registros.
• opciones : es una array que representa elementos seleccionados para mostrar como las opciones disponibles, es de tipo de datos de array, el valor predeterminado es nulo.
• optionLabel : Se utiliza para dar la etiqueta de una opción, es de tipo de datos de string, el valor por defecto es la etiqueta.
• optionValue : se utiliza para dar el valor de una opción, por defecto es la propia opción cuando no está definida. Es de tipo de datos de string, el valor predeterminado es valor.
• optionGroupLabel : Se utiliza para dar una etiqueta al grupo de opciones. Es de tipo de datos de string, el valor predeterminado es la etiqueta.
• optionGroupChildren : se utiliza para obtener el nombre del campo de opciones del grupo de opciones. Es de tipo de datos de string, el valor predeterminado es un elemento.
• grupo : se utiliza para establecer si se muestran las opciones agrupadas cuando se proporcionan opciones anidadas. Es del tipo de dato booleano, el valor por defecto es false.
• showToggleAll : se utiliza para establecer si la casilla de verificación del encabezado se muestra en varios modos. Es del tipo de dato booleano, el valor predeterminado es verdadero.
• estilo : se utiliza para establecer el estilo en línea del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass : se utiliza para establecer la clase de estilo del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.

Eventos:

• onChange : es una devolución de llamada que se activa cuando cambia el valor del cuadro de lista.
• onDblClick : es una devolución de llamada que se activa cuando se hace doble clic en un elemento.
• onClick : es una devolución de llamada que se activa cuando se hace clic en la opción Listbox.

Estilo:

• p-listbox: Se utiliza para el contenedor de un elemento.
• p-listbox-list : Se utiliza como contenedor de la lista.
• p-listbox-item: Se utiliza para mantener el elemento en la lista.
• p-listbox-header : Se utiliza para mostrar el encabezado del elemento.
• p-listbox-filter-container : es un contenedor de entrada de filtro en el encabezado.

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 : después de completar los procesos anteriores, se verá así.

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

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ListBox component</h5>
<p-listbox
  [options]="gfg"
  [(ngModel)]="selectedCourse"
  optionLabel="name"
  [style]="{'width':'15rem'}">
</p-listbox>

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 { ListboxModule } from "primeng/listbox";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ListboxModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from "@angular/core";
import { PrimeNGConfig, SelectItemGroup } from "primeng/api";
  
interface Course {
  name: string;
}
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styles: [],
})
export class AppComponent {
  gfg: Course[];
  selectedCourse: Course;
  
  constructor(private primengConfig: PrimeNGConfig) {
    this.gfg = [
      { name: "HTML5" },
      { name: "JavaScript" },
      { name: "Java" },
      { name: "ReactJS" },
      { name: "AngularJS" },
    ];
  }
}

Producción:

Ejemplo 2: En este ejemplo, haremos un grupo de ListBox dinámico. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ListBox Component</h5>
<p-listbox [options]="gfg" [checkbox]="true" 
           [filter]="true" [multiple]="true" 
           optionLabel="name">
</p-listbox>

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 { ListboxModule } from 'primeng/listbox';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ListboxModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
interface Course {
  name: string;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  gfg: any[];
  
  constructor(private primengConfig: PrimeNGConfig) {
    this.gfg = [
      { name: 'AngularJS' },
      { name: 'ReactJS' },
      { name: 'Java' },
      { name: 'JavaScript' },
      { name: 'HTML' },
      { name: 'PrimeNG' },
      { name: 'Bootstrap' }
    ];
  }
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  }
}

Producción:

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