ekiba-dropdown
v0.0.13
Published
## Demo This component uses a mat-select with a filter, you can see demo in http://ekiba.components.com/master-table-ssr
Downloads
6
Keywords
Readme
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; } ```