ng2-search-select
A simple and smart dropdown with search and tabs. Works great as a starting/decision point for your workflow.
Installation
npm i ng2-search-select
Usage
Import the library into your project.
;
Add the library into your module imports section.
imports: Ng2SearchSelectModule
Be Sure to add the styles into your angular-cli.json.
"styles": "styles.css" "./../node_modules/ng2-search-select/styles.css"
In you comonent template:
<search-select name="sel-ser" id="sel-ser" ngModel width="'350px'" data="data" defaultIndex="defaultIndex" defaultTab="1" onOpen="onOpen()" onClose="onClose()" onChange="onChange($event)"></search-select>
width
- widht of the ccomponent. Specify the width property as a string like[width]="'500px'"
or[width]="'50%'"
.data
- pass the data as an array. Each object in the array must have adata
property which is an array. Each object inside the data array must have a propertylabel
, this is what is displayed on the dropdown. When using multi tabbed data, each object in the array must have atitle
and adata
array.defaultIndex
- the option to select by default, can be dynamicdefaultIndex
or use0
.defaultTab
- when using a multi tabbed component, specify the default tab that must be highlighted. If not specified, this will default to the first tab.onOpen
- a handler to notify when the dropdown is opened.onClose
- a handler to notify when the dropdown is closed.onChange
- a handler to notify when a new slection is made and return the newly seleted item.
## Demo ## License