Angular Custom Dropdown
Create customizable Angular 6 dropdown that can works as either select or datalist with no constraints on styles. Dropdown can be used as form element or independent element.
ngModelcan be used on this for bindings. Support 2-way binding.
npm install --save ng-custom-select
For Angular[2,4,5], install older version
npm install --save firstname.lastname@example.org
Check working Demo. You can test and generate code snippet from demo.
NgSelectModule into your module
Now Start using select box in your components.
* options : Array<Object | String>; //Required | Pass any list of objects(similar struct) or strings, each entry is an option of select box.* displayKey : String; //Optional | Any key name present in object of options Array. Value of this key will be displayed to user as options. By default value of first key will be shown. in case of Array<String> , each entry is displayed as option.* disable : Boolean; //Optional | if True, dropdown will be disabled. Default is false.* styleGuide : Object =// Optional | Styling breaks if css not provided. Write your SCSS/CSS using above class names and proper hierarchy (selectBoxClass > selectMenuClass > optionsClass) and refer `Styling` block.* isDatalist : Boolean ; //Optional | if True, behave like a datalist. User can search upon options of dropdown. Default is false.* searchKeys : Array<String>; //Optional | Provide list of key names of objects of `options` array, user can search upon values of these keys. By default first key name is used as search key.* formControl : AbstractControl; //Optional | FormControlName to bind dropdown with.* ngModel : NgControl; //Optional | Used for binding value.
Note: By default First option of
options list is selected. If you want some other option to be selected, use it with
onChange event to the parent component when selected value is changed by user, So there should be an event handler in parent component class. $event emits clicked option of options Array.
For styling of dropdown, SCSS or CSS can be written as global styles for uniform styling across the project, or you write styles inside your parent component styles using
/deep/ selector. Don't forget to add your css classnames in
styleGuide property of
Note: Please maintain the hierarchy(selectBoxClass > selectMenuClass > optionsClass) of classes while writing style and don't forget to add
<selectBoxClass> in case you are writing styles inside your parent component. You can use your own classnames for select box, just pass the classnames in
styleGuide property of
options =;displayKey = "value";isDisable = false;styleGuide =;isDataList = false;searchKeys = ;
MIT © Uttam Pratap Choudhary