@shirkeshriram/multi-select-ui-lib v0.0.5

MultiSelectUiLib

This library was generated with 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.