Select items inside a component

[mortanalexandru]

I am not able to get back the selected items in the case there is another wrapper component inside the dts-select-container. The SelectContainer uses @ContentChildren to get the $selectableItems. Is there any workaround?
example:

<dts-select-container>
     <parent-component>
         <span  [dtsselectItem]="item"></span>
         <span  [dtsselectItem]="item"></span>
     </parent-component>
</dts-select-container>

Thanks in advance!

[d3lm]

Hey, thanks for filing this issue. The fact that, as you correctly said, the select-container uses @ContentChildren to find all select-items this does not work out of the box if you have another component in between the container and the items. However, this is a small fix as we only need to set descendants to true, which will include not only direct children but also all descendants of components in between.

From the top of my head I cannot think of any negative implications that this might have if we enable the search for descendants. @timdeschryver Curious to hear your thoughts on this.

If there are none, I'll try to fix this as soon as possible. @mortanalexandru You can also send a PR and contribute to this project. Any help is always welcome!

[timdeschryver]

I think it should work.

[d3lm]

I will implement this shortly.

[d3lm]

Soooo, I just looked at the code and found out that we are already using descendants: true so it should actually be not a problem that the select-items are nested in components 🤔

@mortanalexandru Do you mind creating a minimal reproducable. I'd suggest to use StackBlitz?

[jugonzalez40]

Look @d3lm
https://stackblitz.com/edit/angular-hm2c7v

[d3lm]

Ohh I see now. In this case I would suggest to use content projection, meaning to use an ng-content element inside the component so that the select-items remain content of the select-container.