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 [email protected]

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.