Allow to exclude all child elements of an element

[LexLuengas]

Say we have the structure <div class="ancestor"><div class="descendant"></div></div>.

When using [exclude]="'.ancestor'", only elements with the class "ancestor" are excluded from the clickOutside event handler. Child elements are not excluded, so clicking on the ".descendant" element would cause clickOutside to emit.

I would like to exclude the elements matching the selector, as well as all descendant elements. For this I would propose to use a new input property excludeDescendants of boolean type. When true, the elements specified in exclude as well as all their descendants are excluded from the clickOutside event.

Not sure if excludeDescendants should also default to true, because I think most use cases for clickOutside would want to consider descendants when excluding elements anyway. In that case, I would consider to just change the behavior of exclude.

[LexLuengas]

Would make sense to use Element.closest() (https://developer.mozilla.org/en-US/docs/Web/API/Element/closest), because it also returns the element itself when it matches the selector.

[arkon]

Why not just make the selector include children?

[LexLuengas]

You mean why not use [exclude]="'.ancestor,.descendant'"? The example was oversimplifying. In my actual use case, I want to exclude a dropdown that is injected by a library. The dropdown has quite a few dynamically added children, which is why it would be easier and less verbose to use [exclude]="'.dropdown'" and have it exclude all descendants as well.

[arkon]

I mean something like .ancestor *.