search

optimistex / ngx-select-ex

Angular based replacement for select boxes
https://optimistex.github.io/ngx-select-ex/
MIT License
111 stars 42 forks source link

Manipulate the selected content in ngx-select [multiple] #175

Closed JeyashreeA closed 4 years ago

JeyashreeA commented 4 years ago

I am trying to using the "ngx-select-ex" library for selecting multiple options from a drop-down. When more than 3 items are selected, I would like the selected items to show up as " Selected".

I understand that in case of single select, we can manipulate the template by using the "ngx-select-option-selected" directive. But I cant seem to get the expected result in case of multi select. All the selected values become "4 Selected" when the number of selected options become more than 3.

What would be the appropriate way to achieve this behaviour?

optimistex commented 4 years ago

@JeyashreeA Sorry, but I read twice and did not get your idea.

It works like that: https://optimistex.github.io/ngx-select-ex/ image

Could you, draw your idea to show on a picture what exactly do you want to do? Also, you could update the playground to express your idea: https://stackblitz.com/edit/angular-issues-172

JeyashreeA commented 4 years ago

Hi @optimistex ,

Sorry for not being very clear. The behaviour that I am trying to achieve is as below:

When a predefined minimum value of elements are selected, I would like to see their names as such. Screenshot 2020-01-23 at 12 07 51 PM

However, once they exceed this limit, it would be great to see as below (4 selected) in the selected options. Screenshot 2020-01-23 at 12 08 14 PM

I have updated what I tried with the library here - https://stackblitz.com/edit/angular-issues-172-nz655h. I used the "ngx-select-option-selected" for this. I understand that the directive is to manipulate each option individually and there are also other flaws here such as the clear option inside each selected option pill. So I was hoping if you would help me understand if we would just somehow group them up to show them as a collective entity.

Please let me know if I haven't been clear. Thanks!

optimistex commented 4 years ago

@JeyashreeA Try this: https://stackblitz.com/edit/angular-issues-175-2 Generally, the component does not support your idea. However, you can make a wrapper to add the functionality.

JeyashreeA commented 4 years ago

@optimistex I understand the component doesnt support the idea. I realised that too. Thanks for the help... I had a similar idea and made that change too!

I am closing the ticket now.