EkibaDropdown

Demo

This component uses a mat-select with a filter, you can see demo in http://ekiba.components.com/master-table-ssr

API

bash ```bash

npm

$ npm install ekiba-dropdown

yarn 🔥🤩

$ yarn add ekiba-dropdown

```

module.ts ```typescript

Add the dependencies in your xxx.module.ts

import {EkibaDropdownModule} from 'ekiba-dropdown'; ```

html example ```html <ekiba-dropdown [selectedArray]="units" [loadedValues]="selectedUnit" [multipleSelect]="false" [placeholder]="'Selecciona una unidad'" [noEntriesFound]="'No se encontraron unidades'" [title]="'Unidad*'" (changedValue)="updateUnit($event)">

Screen component ts ```typescript import {DropdownElement} from 'ekiba-dropdown';

// The interface could be imported, it's just an example interface Unit { codigo_interno: string; codigo: string; id: number; name_province: string; nombre: string; }

export class DropdownComponent { // Source example public units: Unit[] = [ {codigo: '123', codigo_interno: '456', id: 1, name_province: 'Salamanca', nombre: 'Unión Deportiva Salamanca'}, {codigo: '123', codigo_interno: '456', id: 2, name_province: 'Valladolid', nombre: 'Real Valladolid'}, {codigo: '123', codigo_interno: '456', id: 3, name_province: 'Murcia', nombre: 'Gamusinos F.C'} ];

// Input properties public selectedUnit: Unit = this.units[0]; public selectedUnits: Unit[] = [this.units[0], this.units[1]]; public arrayValidatorsUnits: ValidatorFn[] = [Validators.required];

public updateUnits(dropdownElements: DropdownElement[]): void { this.selectedUnits = this.units.filter(u => dropdownElements.some((dropdownElement: DropdownElement) => dropdownElement.id === u.id)); }

public updateUnit(dropdownElement: DropdownElement): void { this.selectedUnit = this.units.find((unit: Unit) => unit.id === dropdownElement.id) || this.selectedUnit; // Example with a form control // this.unitsForm.controls.unitId.setValue(this.selectedUnit.id); } } ```

Component inputs

```typescript @Input() public title!: string;

@Input() public placeholder!: string;

@Input() public noEntriesFound!: string;

@Input() public multipleSelect!: boolean;

@Input() public arrayValidators!: ValidatorFn[];

@Input() public selectedArray: DropdownElement[];

@Input() public loadedValues!: DropdownElement|DropdownElement[];

@Input() public includeEmptyOption: boolean;

@Input() public floatLabel: FloatLabelType;

@Output() changedValue = new EventEmitter<DropdownElement|DropdownElement[]>();

interface DropdownElement { nombre: string; id: number; } ```