Feature: Add directive for easy filtering

[macjohnny]

• Add directive
• Update docs
• Add examples
• Add Tests
• Release

[miroslavgrozdanovski]

Hi @macjohnny,

I'm currently adding this library into our app, and because there are a lot of select components that need this, I'm trying to implement an additional directive. For now I'm only concerned with the simplest case, single selection with client-side data.

A directive that will offload some of the repetitive filtering work is not that difficult to be implemented, probably with some two-way bound array that will represent the filtered data.

But how can we take pipes into account here? I can have an availableItems array, but also use one or multiple pipes that somehow change the display value. In most cases, the user would expect to filter data based on what he sees on the UI, which is the value after the pipes are executed.

What do you think of the approach of adding a directive on the mat-select that shows/hides filtered options using display: none for example? The code for displaying the options wouldn't change (it will use the original availableItems array, no need for filteredItems), and by filtering using the option.innerText, pipes become irrelevant.

Are there some obvious pitfalls with this apporach?

Thank you!

[macjohnny]

@miroslavgrozdanovski thanks for looking into this!
a problem with the approach you propose is that the scroll-offset of the select panel is calculated with the index of the selected option
https://github.com/angular/components/blob/6204f5fe2080573dc79cf947c34ddd98259c1a58/src/material/select/select.ts#L1312
hiding some options with display:none would then lead to the selected option not necessarily being visible when

• opening the select with a pre-set filter, i.e. some options not visible initially
• navigating the options with the arrow keys while some options are filtered
  since the scroll offset is calculated with the assumption that all options are visible.

however, you could look at the approach in https://github.com/bl4y/mat-searchable, this would also be great to include here.

[miroslavgrozdanovski]

@macjohnny, thanks for the prompt response!

Thanks for pointing out the problems. I'm not using a pre-set filter, so I didn't notice the first one, but the second is definitely an issue (I just tried it). Pointing to that other library was also helpful, since it looks like my requirements were tackled quite nicely there.

I'm currently combining the two libraries and it looks like it works perfectly so far! I did this by copying MatSearchableDirective and MatSearchableItemDirective from the other library. I skipped MatSearchableInputDirective, as instead I'm using your MatSelectSearchComponent component. I had to do a few changes in the MatSearchableDirective in order for it to use your search component instead of the MatSearchableInputDirective.

I think that adding similar directives like these would make your library even better, as it looks like a good combination. The next thing I'm looking into is handling option groups, but that can also be solved in a generic way inside the MatSearchableDirective and avoid having the filtering logic in each component like your example with option groups.

[miroslavgrozdanovski]

@macjohnny, do you have an idea how can we use these directives to implement filtering through option groups in a generic way?

I tried something, but it was not successful. Basically the idea is to inject the Option Groups and entirely hide all groups which don't have any options that match the current search term. I was not able to inject child structural directives into a parent structural directive and that's where I got stuck...

Any idea or advice would be much appreciated :)