# @shirkeshriram/multi-select-ui-lib

> Multiple select and search dropdown

Latest version **0.0.5** (published 2021-04-13) · 0 weekly downloads

## Install

```sh
npm install @shirkeshriram/multi-select-ui-lib
pnpm add @shirkeshriram/multi-select-ui-lib
yarn add @shirkeshriram/multi-select-ui-lib
bun add @shirkeshriram/multi-select-ui-lib
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2021-04-13 |
| First published | 2021-04-13 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 159.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | shirkeshriram |
| Keywords | dropdown, search |

## Links

- npm: https://www.npmjs.com/package/@shirkeshriram/multi-select-ui-lib
- npm.io page: https://npm.io/package/@shirkeshriram/multi-select-ui-lib

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2021-04-13
- 0.0.4 — 2021-04-13
- 0.0.3 — 2021-04-13
- 0.0.2 — 2021-04-13
- 0.0.1 — 2021-04-13

## README

# MultiSelectUiLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.9.

- dropdown with multiple selction option.
- bind to any custom data source.
- search item with custom placeholder text.
- select/de-select items.

## Installation
`npm i @shirkeshriram/multi-select-ui-lib`

## Setup packages class on your files
Import MultiSelectUiLib module into Angular application(app.module.ts) from the package

```
import { MultiSelectUiLibModule } from '@shirkeshriram/multi-select-ui-lib';
//....

@NgModule({
	//....
	imports: [
		MultiSelectUiLibModule
		//....
	]
  //....
})
//...

```
## Binding data source
Array format add into component file and this array of records passed to MultiSelectUiLib component. (app.component) see below 

```
export class AppComponent {
//....
//....
countries = [
{"label": "Afghanistan", "value": "AF"}, 
{"label": "land Islands", "value": "AX"}, 
{"label": "Albania", "value": "AL"}, 
{"label": "Algeria", "value": "DZ"}
]
//....
}
```


Define the Angular MultiSelectUiLib Dropdown code within the app.component.html file which is mapped against the templateUrl option in the app.component.ts file. [app.component.html]

```
//....
<multiSelect [options]="countries" [filter]="true" filterBy="label,value"></multiSelect>
//....
```


Run the application with the command **ng serve** in the command prompt. You can view the Angular MultiSelectUiLib Dropdown output with the data and other settings.

---
_Source: https://npm.io/package/@shirkeshriram/multi-select-ui-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._