@eff-custom-plugins/custom-dropdown

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 list Returns: 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);
}