Multi select in angular manually
Recently I had a task where I needed a select dropdown with multi select options from the list in angular. First I searched the web if I could find any such plugins, and there are hundreds of them available on npm, which would easily fulfil the requirements. The catch was that not everyone have the functionality I needed in my task,, so I want to share it with other developers out there who might need something like this which isn’t very much complex and can be created easily using javascript. The main goal of creating this one manually is to allow developer to have more liberty with what they want to do extra or add something.
Pre-requisite
Before starting, understanding of angular as well as basic knowledge of HTML, CSS and javascript are a must. We’ll need to manipulate arrays so understanding of some array methods are also required.
Create a new project
ng g new angular-multi-select-manual
After that lets add code for initial array values
- We have added an array for selection, along with it being duplicated to also search values in input box, so that it doesn’t messes with the original array.
- Added isDropDownOpen flag variable to open/close the list on click over the input box.
- We have also taken another array as selectedSports, to add all the selected values in that array, so they can also be removed easily on click.
Next we will create the html part along with some css to give it a good look, we have also added bootstrap to angular for designing.
As seen in the code, we have created a div in which we will show the selected values as buttons, and upon clicking on the button, it will be removed. We have also disabled the selected value from the list, so that one cannot be selected again and added the css for the html.
Lets get to the main part
Creating array and the HTML, CSS was just the starting, we’ll now manage the array selections/deselection on click over button and list.
Select value to add to the selected array
the addItem() function adds value to the selected array list and assigns true value to the selected key in the main array and displays in the div box
Removing selected value from the list
The removeItem() removes value from the list, and assign selected key to false in the main array
Searching through the list
We can also create searching functionality into the list. For that we have assigned a duplicate var from the main array, so that when searching is done from it, the main array doesn’t loses its content.
This is the very basic implementation of the code for manually creating a multi select dropdown, though it isn’t totally foolproof, but it can be used for a simple implementation. We can also make changes into it and take a select element with reactive form control.
Here’s the git url for complete code angular-multi-select-manual.
