Hola a todos, hoy os voy a explicar como podemos instalar y utilizar el componente DDR Dropdown de la biblioteca DDR.
Aquí puedes ver la documentación del componente.
El componente ddr-dropdown es un componente para mostrar elementos, permitiéndonos filtrar para buscar
Para instalar el componente, abre una terminal y escribe: npm i ddr-dropdown
En este componente, tenemos los siguientes inputs:
- options: las opciones a mostrar. Son del tipo DdrSelectItem que contienen un label y un value.
- valueSelect indica el valor que se debe de precargar, si existe.
- labelNoResults: muestra el texto cuando no hay opciones disponibles.
Como eventos, tenemos los siguientes:
- select: evento cuando se clicka en una opción.
En este componente, podemos personalizar el contenido de cada item.
También podemos buscar los elementos que coincidan con el label.
Os dejo un ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class="row"> class="col-4 mt-4"> [valueSelect]="valueSelect" [options]="options" labelNoResults="No hay resultados que mostrar" (select)="selectItem($event)"> {{item.label + " - " + item.value}} Este texto no deberia verse al abrir el dropdown |
Así seria el typescript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
export class DdrDropdownDemo { options: DdrSelectItem[]; valueSelect: string; constructor() { } ngOnInit() { this.options = [ new DdrSelectItem('Label1', 'Value1'), new DdrSelectItem('Label2', 'Value2'), new DdrSelectItem('Label3', 'Value3'), new DdrSelectItem('Label4', 'Value4') ] this.valueSelect = 'Value3'; } selectItem($event){ console.log($event); } } |
Recuerda que si quieres aprender a como realizar la tuya, lo puedes ver en nuestro curso de angular de Crea tu propia biblioteca de componente con Angular.
[ufwp id=»2167310″]Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta