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 desplegable en Angular ngx Bootstrap. También aprenderemos sobre las diversas propiedades, eventos, métodos y estilos junto con sus sintaxis que se usarán en el ejemplo de código.
Componente desplegable: se utiliza para elegir los objetos de la lista de elementos dada.
Propiedades:
- opciones : es un objeto de 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 el nombre a una etiqueta de una opción. Es de tipo de datos de string, el valor predeterminado es la etiqueta.
- optionValue : se utiliza para dar el nombre a un 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 un nombre a una etiqueta en el grupo de opciones. Es de tipo de datos de string, el valor predeterminado es la etiqueta.
- optionGroupChildren : Se utiliza para dar un nombre al campo de opciones en el grupo de opciones. Es de tipo de datos de string, el valor predeterminado es elemento.
- name : Se utiliza para establecer el nombre del elemento de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
- scrollHeight : se utiliza para establecer la altura de la ventana gráfica en píxeles, se define una barra de desplazamiento si la altura de la lista supera este valor. Es de tipo de datos de string, el valor predeterminado es 200px.
- estilo : se utiliza para establecer un 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.
- filtro : se utiliza para mostrar un campo de entrada para filtrar los elementos en keyup. Es de tipo de dato booleano, el valor por defecto es false.
- filterValue : Es un filtro que se muestra con este valor. Es de tipo de datos de string, el valor predeterminado es nulo.
- filterBy : Decide contra qué campo o campos (separados por comas) buscar. Es de tipo de datos de string, el valor predeterminado es nulo.
- filterMatchMode : se utiliza para definir cómo se filtran los elementos. Es de tipo de datos de string, el valor predeterminado es contiene.
- filterPlaceholder : se utiliza para configurar el texto del marcador de posición para que se muestre cuando la entrada del filtro está vacía. 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. La configuración regional predeterminada es la configuración regional actual del entorno host. Es de tipo de datos de string, el valor predeterminado es indefinido.
- requerido : Especifica que se debe completar un campo de entrada antes de enviar el formulario. Es del tipo de dato booleano, el valor por defecto es false.
- disabled : Especifica que el componente debe estar deshabilitado. Es del tipo de dato booleano, el valor por defecto es false.
- readonly : Especifica que el componente no se puede editar. 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.
- emptyFilterMessage : se utiliza para configurar el texto que se mostrará cuando el filtrado no devuelva ningún resultado. Es de tipo de datos de string.
- ariaLabelledBy : Es la propiedad ariaLabelledBy 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.
- editable : se utiliza para especificar el valor personalizado en lugar de las opciones predefinidas que se pueden ingresar usando el campo de entrada editable. Es del tipo de dato booleano, el valor por defecto es false.
- maxlength : se utiliza para especificar el número máximo de caracteres permitidos en el campo de entrada editable, es de tipo de datos numérico, el valor predeterminado es nulo.
- appendTo : esta propiedad toma el ID del elemento al que se agrega la superposición. Acepta cualquier tipo de dato, el valor por defecto es nulo.
- 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.
- dataKey : Es una propiedad para identificar de forma única un valor en las opciones. Es de tipo de datos de string, el valor predeterminado es nulo.
- autofocus : especifica que el componente debe enfocarse automáticamente en la carga. Es del tipo de dato booleano, el valor por defecto es false.
- autofocusFilter : se utiliza para aplicar el foco al elemento de filtro cuando se muestra la superposición. Es del tipo de dato booleano, el valor por defecto es false.
- resetFilterOnHide : se utiliza para borrar el valor del filtro al ocultar el menú desplegable. Es del tipo de dato booleano, el valor por defecto es false.
- dropdownIcon : se utiliza para establecer la clase de icono del icono desplegable. Es de tipo de datos de string, el valor predeterminado es pi pi-chevron-down.
- emptyFilterMessage : se utiliza para configurar el texto que se mostrará cuando el filtrado no devuelva ningún resultado. Es de tipo de datos de string.
- autoDisplayFirst : se utiliza para especificar si mostrar el primer elemento como la etiqueta si no se define ningún marcador de posición y el valor es nulo. Es del tipo de dato booleano, el valor predeterminado es verdadero.
- grupo : se utiliza para especificar si se muestran las opciones agrupadas cuando se proporcionan opciones anidadas. Es del tipo de dato booleano, el valor por defecto es false.
- showClear : se utiliza para mostrar el icono de borrado que se muestra para borrar el valor. Es de tipo de dato booleano, el valor por defecto es false.
- baseZIndex : se usa para establecer el valor base de zIndex para usar en la estratificación. Es de tipo de dato numérico, el valor por defecto es 0.
- autoZIndex : se utiliza para especificar si se administran automáticamente las capas. Es del tipo de dato booleano, el valor predeterminado es verdadero.
- showTransitionOptions : se utiliza para establecer las opciones de transición de la animación del espectáculo. Es de tipo de datos de string, el valor predeterminado es .12s cubic-bezier (0, 0, 0.2, 1).
- hideTransitionOptions : se utiliza para establecer las opciones de transición de la animación oculta. Es de tipo de datos de string, el valor predeterminado es .1s lineal.
- ariaFilterLabel : se utiliza para definir una string que etiqueta la entrada del filtro. Es de tipo de datos de string, el valor predeterminado es nulo.
- información sobre herramientas : se utiliza para mostrar la información de asesoramiento para mostrar en una información sobre herramientas al pasar el mouse. Acepta cualquier tipo de dato, el valor por defecto es nulo.
- tooltipStyleClass : se utiliza para establecer la clase de estilo de la información sobre herramientas. Es de tipo de datos de string, el valor predeterminado es nulo.
- tooltipPosition : se utiliza para establecer la posición de la información sobre herramientas, los valores válidos son derecha, izquierda, arriba y abajo. Es de tipo de datos de string, el valor predeterminado es superior.
- tooltipPositionStyle : Se utiliza para establecer el tipo de posición de CSS. Es de tipo de datos de string, el valor predeterminado es absoluto.
Eventos:
- onClick: es una devolución de llamada que se activa cuando se hace clic en el componente.
- onChange: es una devolución de llamada que se activa cuando cambia el valor del menú desplegable.
- onFilter: es una devolución de llamada que se activa cuando se filtran los datos.
- onFocus: es una devolución de llamada que se activa cuando el menú desplegable recibe el foco.
- onBlur: es una devolución de llamada que se activa cuando el menú desplegable pierde el foco.
- onShow: es una devolución de llamada que se activa cuando la superposición desplegable se hace visible.
- onHide: es una devolución de llamada que se activa cuando la superposición desplegable se oculta.
Métodos:
- resetFilter: Se utiliza para restablecer el filtro.
- foco: Se utiliza para aplicar el foco.
- show: Se utiliza para mostrar el panel.
- ocultar: Se utiliza para ocultar el panel.
Estilo:
- p-dropdown: Es un elemento contenedor de estilo.
- p-dropdown-clearable: es un elemento contenedor de estilo cuando showClear está activado.
- p-dropdown-label: Es un elemento de estilo para mostrar la etiqueta de la opción seleccionada.
- p-dropdown-trigger: Es un elemento de icono de estilo.
- p-dropdown-panel: Es un elemento de panel de estilo.
- p-dropdown-items-wrapper: Es un elemento contenedor de estilo de la lista de elementos.
- -dropdown-items: Es un elemento de lista de estilos de elementos.
- p-dropdown-item: Es un elemento de lista.
- p-dropdown-filter-container: es un contenedor de estilo de entrada de filtro.
- p-dropdown-filter: Es un elemento de filtro de estilo.
- p-dropdown-open: Es un elemento contenedor de estilo cuando la superposición es visible.
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 desplegable.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG dropdowm component</h5> <p-dropdown [options]="lang" placeholder="Select a Language" optionLabel="name" [showClear]="true"> </p-dropdown>
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html"
})
export class AppComponent {
lang = [
{ name: "HTML" },
{ name: "ReactJS" },
{ name: "Angular" },
{ name: "Bootstrap" },
{ name: "PrimeNG" },
];
}
app.module.ts
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 { DropdownModule } from "primeng/dropdown";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DropdownModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Ejemplo 2: en este ejemplo, sabremos cómo usar la propiedad editable en el componente desplegable.
app.component.html
<h2>GeeksforGeeks</h2>
<h5>PrimeNG dropdowm component</h5>
<p-dropdown
[options]='[{name: "Editable1"}, {name: "Editable2"},
{name: "Editable3"}, {name: "Editable4"},
{name: "Editable5"}]'
editable="true"
placeholder="Select a Language"
optionLabel="name"
[showClear]="true">
</p-dropdown>
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
}
app.module.ts
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 { DropdownModule } from "primeng/dropdown";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DropdownModule,
FormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/dropdown