How To Create A Filter On A Drop Down List Angular

Implementing a search bar for filtering the options in the select-dropdowns in Angular

During i of my projects, information technology was needed to implement a select-dropdown for showing the countries with their respective dial codes and the user should be able to search through them. This was to make the mobile number in the right format.

Unfortunately, I came to know that Angular Materials does not provide that functionality. So, I thought if I could have a workaround using the matAutoComplete. I take seen some Github comments about the workaround but they were not powerful enough and were a flake complicated.

The issue has been addressed to the angular cloth team by many through a Github issue a long time ago. The team says they are looking for a solution and they will implement information technology and yeah they may have got more important issues to solve. You can check about the issue here: https://github.com/angular/material2/problems/5697

So as usual, I tried searching for libraries to practise the work till the angular team implement the feature and I found a couple of them, but they were either besides simple to be any powerful or were too complicated and verbose to exist convenient.

That's when I thought well-nigh trying to develop a library to solve this problem. I wanted to go far uncomplicated to utilise and even so it should be powerful and that's what MatSelectSearch has get. So finally, there is a solution to this problem.

MatSelectSearch

npm link: https://www.npmjs.com/packet/mat-select-search

MatSelectSearch is an Athwart component providing functionality to search/filter MatSelect options of the Athwart Material library which is unproblematic to utilise and more than powerful than any other library that aims to solve this problem currently. The search functionality is optimized likewise, that is MatSelectSearch is able to search through long lists faster than the current libraries for the same.

How to use it?

Install mat-select-search in your project

          npm install mat-select-search

Import the mat-select-search into the app module. In case lazy loading is beingness used, import it into the detail module where y'all need the library.

Identify the lib-mat-select-search component inside a mat-option of the mat-select.

There are two inputs to be passed to enable the search:

[list]
[searchProperties]

There is 1 event fired after filtering the mat-options

(filtered)

[list]

Pass the assortment to exist filtered to the lib-mat-select-search through the [listing] input.

          [list]="countries"

[searchProperties]

Pass the properties which are to be searched to the [searchProperties] input. Now, hither mat-select-search is providing a unique functionality that the other electric current libraries do non provide.

mat-select-search supports multi-property search. Consider a scenario where you lot take a list of countries every bit such:

          [
            {
            proper name: "India",
            dialCode: "+91",
            code: "IN"
            },
            {
            proper name: "Indonesia",
            dialCode: "+62",
            code: "ID"
            },
..............and goes on

Now, suppose there is a use case where the search should happen not only by proper name merely also with dialCode and code. Then, fifty-fifty if the user types the dialCode of the country or the code of the country, the search should be happening. To enable this holding in mat-select-search there is no extra overhead.

[searchProperties] receives an assortment of strings. The strings are the properties by which the search should happen. So, in example if the search should happen only past the proper name provide:

          [searchProperties]="['name']"

If the search should happen by proper noun, dialCode and code, only provide:

          [searchProperties]="['proper name', 'dialCode', 'code']"

It'south as simple as that.

Now, the order by which the backdrop are provided matters a scrap. If the properties are provided in the above way, the search term 'India+91' volition withal give the correct result but non '+91India'. Consider the club if yous got any particular use case where this matters. In about cases, it does non matter. So the club of the properties does not matter much.

(filtered)

(filtered) is an event that is fired after filtering the mat-options. Shop this filtered array into another variable.

          //Storing the filtered array in filteredCountries
(filtered)="filteredCountries = $upshot"

And that's information technology. Now mat-select-search is prepare and you can implement the search!!!

The [list] and [searchProperties] are the required inputs for the search to piece of work. There are optional inputs also that provide some customization.

[clearSearchInput]

[clearSearchInput] is fix to faux by default. When set to true, the search bar will be cleared later the mat-select is closed then that when the mat-select is reopened the search bar will be empty.

[fixOnTop]

[fixOnTop] is prepare to false by default. When set to true, the search bar position is fixed on the top and it does not whorl with the mat-options, so it is visible even while scrolling.

Then, why non set it to true by default?. It's considering the search bar never loses focus. So even if it is scrolled upwards and is not visible, simply printing whatever central and the search bar appears and the search happens. So, there is not necessarily a need to gear up it on tiptop. Especially for mobile devices, it is better to brand it scroll, and then the unwanted space is saved and a mat-option will be displayed in its identify.

Also, if a user prefers scrolling rather than typing, the search bar is purely a waste product of space. So, [fixOnTop] is set up to imitation by default and if someone wants it to stay at the top, it's still possible, just set [fixOnTop] to truthful.

[hasSelectAll]

[hasSelectAll] is set up to simulated past default. When set to true, information technology provides functionality to take an option to select all the mat-options in the multiple select.

Too, provide a mat-option for 'Select All' and identify it below the mat-selection for lib-mat-select-search.

          <mat-option>Select All</mat-choice>

How to brand MatSelectSearch work with formArray?

While working with formArray, it is non plenty to just store a single filtered array. There should be a filtered array for each course.

Imagine a scenario where there are multiple forms and each one has a mat-select to select the country. With the same logic equally in a higher place, the search will work perfectly for the mat-select whichever the user interacts with initially but while interacting with another mat-select, the value of the first mat-select will be gone. This is considering the variable 'filteredCountries' is shared by all the mat-select.

So, to solve all these problems, make 'filteredCountries' a 2-d array and shop the filtered array in the respective index of the 'filteredCountries'.