2.2.0 • Published 4 years ago
@eff-custom-plugins/custom-dropdown v2.2.0
Custom Dropdown
CustomDropdown is a reusable dropdown component using Angular v8.2.0.
Installation
NPM
npm i @eff-custom-plugins/custom-dropdownUsage
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);
}