Custom Dropdown

CustomDropdown is a reusable dropdown component using Angular v8.2.0.

Installation

NPM

npm i @eff-custom-plugins/custom-dropdown

Usage

Html

<custom-dropdown [setCurrentCategory]="{id: 1, title: 'Category 1'}"
                 [setCategoriesList]="[{id: 1, title: 'Category 1'}]"
                 [setSuggestionList]="[{id: 9,type: 'type', title: 'sTag',
                  count: 25,parent: 'Category 1'}]"
                 [setCategoryResultData]="[{1: {id: 4, title: 'Result 1'}}]"
                 (searchInputEvent)="onInputChange($event)"
                 (removeSelectedItemEvent)="onItemRemove($event)"
                 (changeCategoryEvent)="onCategoryChange($event)">
                 <button contentBySearchField>Btn</button>
</custom-dropdown>

Attributes

Attributes | Description -----------|------------ @Input() setCurrentCategory: ICategoryDropDown | The default category @Input() setCategoriesList: ICategoryDropDown[] | The list of categories @Input() setCategoryResultData: {(category_id:string): IDropDownResultList[]} | The result data by category @Input() setSuggestionList: {(IDropDownResultList[]} | The result data by suggestion @Output() searchInputEvent: EventEmitter<ISearchData.>() | The event will be fired on change of search input value.Returns: Input value and selected category @Output() removeSelectedItemEvent: EventEmitter<IDropDownResultList.>() | The event will be fired when item will be removed from selected results listReturns: The item that was removed @Output() changeCategoryEvent: EventEmitter<{category: ICategoryDropDown, parentCategory: ICategoryDropDown}>() | The event will be fired on change of category list.Returns: Selected category and his parent category

Example and Sample Code

1. Import 'CustomDropdownModule' in your app module

import { CustomDropdownModule } from "@eff-custom-plugins/custom-dropdown";
  
@NgModule({
  imports:[
    ..
    CustomDropdownModule
    ..
  ]
})

1. Add bootstrap and main styles to your app

npm i bootstrap

"styles": [
  ..
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@eff-custom-plugins/custom-dropdown/lib/assets/main.scss",
  ..
],

3. Add 'custom-dropdown' in your component html

<custom-dropdown [setCurrentCategory]="{id: 1, title: 'Category 1'}"
                 [setCategoriesList]="[{id: 1, title: 'Category 1'}]"
                 [setCategoryResultData]="[{1: {id: 4, title: 'Result 1'}}]"
                 [setSuggestionList]="[{id: 9,type: 'type', title: 'sTag',
                                   count: 25,parent: 'Category 1'}]"
                 (searchInputEvent)="onInputChange($event)"
                 (removeSelectedItemEvent)="onItemRemove($event)"
                 (changeCategoryEvent)="onCategoryChange($event)">
</custom-dropdown>

4. Add methods in your component class to listen for @Output events from dropdown

/*For example a method to listen for searchInputEvent event from dropdown*/
onInputChange(data: ISearchData) {
    const term: string = data.value;
    const category: ICategoryDropDown = data.category;
    
    this.getResultList(term, category.id);
}