0.1.1 • Published 6 years ago
ng2-search-select v0.1.1
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.
import { Ng2SearchSelectModule } from 'ng2-search-select';
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