Angular CDK Overlay - What is the difference between dispose and detach?

user_14028213 0
Viewed 2097

I created a tooltip that appears on hover using Angular Material CDK Overlay, but my performance was affected badly and it made my app really slow. After some research I realized that I need to clear the overlayRef each time when closing the tooltip by using either dispose or detach.

Now, I'm trying to understand the difference between the two functions. According to angular material documentation they are defined as follows:

dispose - Cleans up the overlay from the DOM.

detach - Detaches an overlay from a portal.

When I tried using each of them I saw the same result so not sure which one I should use when.

angular-cdk angular-material angular
1 Answers

detach() - before and after detach. As you can see the created div has remain. enter image description here

dispose() - before and after dispose. The created div has been removed completely. enter image description here

For closing the overlay when you have only one opened I would say go with dispose. When yo have many components opened with overlay like for example many different popovers and you want to close just one, than you should go with detach. But this will work only if you have scoped overlay (per component).

user_53812940
Related