ekiba-dropdown12 v1.0.2

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)"> <ekiba-dropdown selectedArray="units" multipleSelect="true" loadedValues="selectedUnits" placeholder="'Selecciona una o varias unidades'" noEntriesFound="'No se encontraron unidades'" title="'Unidades'" arrayValidators="arrayValidatorsUnits" (changedValue)="updateUnits($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.units0; public selectedUnits: Unit[] = [this.units0, this.units1]; 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; } ```