Angular2 dual listbox example with demo – Angularjs 2 dual listbox
Angular2 dual listbox example :: In this post we will show you how to use dual listbox in Angularjs 2 with example and demo.
For Angular2 dual listbox ::The dual-listbox supplies 2 lists side-by-side that permits things in one list to be emotional to the opposite list via drag-and-drop and/or a button-based interface. It supports multiple select choices from the list and programatic setting of list sources.
For Angular2 dual listbox, this dual listbox we can select all type of data to other listbox and we can also pass single data to each other lisbox.
The dual-listbox consists of a single file :: (app/dual-list.component.ts) and can be employed in conjuction with provided CSS and Bootstrap also the piece of paper (css/record-picker.css) for presentation.
How to use Angular2 dual listbox
Copy dual-list.component.ts into your app and add DualListComponent to the desired component’s directives array. Additionally, add the record-picker.css to your app’s index.html. See index.html for Associate in Nursing example.
The following parameters are often assault a dual-list:
- display – The field of every object for displaying the article each the lists, default is _name.
- compare – A compare function to be used for sorting the lists. Note if sort is not set and compare is about, then sort can be set true.
- sort – A boolean whether or not or not to keep the lists sorted, default is false.
- height – The height of the lists, default is almost 100p
- key – The unique symbol field of every object within the supply and destination arrays, default is _id.
destination The destination array of objects selected from the list. Note, the destination array can have prexisting parts.
The drag-and-drop between multiple dual-listbox components could cause unsought moves. For the time being, if the component is used, then it is recommended solely have one dual-listbox visable to the user at a time.
How to start Angular2 dual listbox
- Clone this
repo - Install the dependencies:
npm install - Run the TypeScript transpiler and begin the server:
npm start
You also like : Angular Min Max validators