0.0.9 • Published 3 years ago
searchable-dropdown v0.0.9
SearchableDropdown
This library was generated with Angular CLI version 10.2.4.
Note
This component does not use JQUERY
How to use
This component accepts a tuple {key: value} array.
Two way bindings
[(value)] updates when the value inside the textfield changes
[(key)] Updates when the key is updated.
Event Emitters
(onSearch) emits searched value after 500ms
(onStart) emits on the start
(onOpen) emits when dropDown opens.
Inputs
[defaultItem]={key: 1, value="hamza"} default values to set
Public Methods
dropDown.showAddNewItemSection() Show/Hide addItemScreen
Public variables
dropDown.value; return the value inside the textfield
dropDown.key; return the key/id of the element
populating the list
dropDown.isListLoading = true;
dropDown.itemsToShow.push({key: 2, value: 'test'});
dropDOwn.isListLoading = false;
<app-searchableDropDown #dropDown [(value)]="variableValue" [(key)]="variableKey"
(onSearch)="getEnrollments(dropDown)"
(onStart)="getEnrollments(dropDown)"
[defaultItem]="{key: 1, value: 'hamza'}">
<div class="add-new-section">
//Enter all the elemets here.
<button class="arow-icn" (click)="dropDown.showAddNewItemSection()">
<i class="fa fa-arrow-left"></i>Back
</button>
<div class="col-sm-12">
<div class="form-group text-left">
<label for="name">Enter Something</label>
<input type="number" placeholder="Enter a Value" class="form-control">
</div>
</div>
<div class="col-sm-12">
<button class="btn btn-primary w-100"
>Save</button>
</div>
</div>
</app-searchableDropDown>
Contact
found any mistakes? have a better idea of doing it? please let me know at hamza13sw185@gmail.com
Change logs
Version 0.0.9
@Input entereValue removed. user @Input value instead of enteredValue
@Input placeHolder added.
@Output onOpen Added, this event is emitted when the dropdown opens.
Version 0.0.8
Bug fix: onStart EventEmitter now works correctly.