Expose overlay pointer events as public API so user can prevent backdrop from consuming clicks

[benelliott]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

It would be great if the user could choose to disable pointer events on an overlay backdrop so that elements underneath the overlay can still be interacted with. In my use case, I am using an overlay to create a custom read-only tooltip-like readout, so the content of the overlay itself is not interactive, but the content underneath the backdrop is.

What is the current behavior?

I am currently disabling pointer events by using a private API:

(overlay.overlayRef as any)._togglePointerEvents(false);

Is there anything else we should know?

Somewhat related to #9320

[crisbeto]

The OverlayRef already exposes the overlayElement and backdropElement. You should be able to use them to style the elements. Also FWIW, disabling pointer events on the backdrop would basically be the same as removing the backdrop altogether.

[benelliott]

@crisbeto Sorry - when I wrote this I forgot what I was actually trying to do. I want to disable pointer events on an overlay without a backdrop.

Like you said, I could achieve this by doing overlay.overlayRef.overlayElement.style.pointerEvents = 'none' but it seems a bit dirty considering there is already the _togglePointerEvents method on the OverlayRef?

[crisbeto]

That method is mostly there for convenience. I don't think your example is dirty, because we exposed the overlayElement to handle cases like this one.

[benelliott]

Cool, thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}