Como instalar y utilizar DDR Dropdown de la biblioteca DDR

02/05/20210 comentarios

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:

<div class="row">
  <div class="col-4 mt-4">
      <ddr-dropdown 
          [valueSelect]="valueSelect" 
          [options]="options"
          labelNoResults="No hay resultados que mostrar"
          (select)="selectItem($event)">

          <ng-template itemTemplate let-item="item">
            {{item.label + " - " + item.value}}
          </ng-template>

      </ddr-dropdown>

      <p>Este texto no deberia verse al abrir el dropdown</p>

  </div>
</div>

Así seria el typescript.

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.