CODEWITHSUNDEEP
angularangular-materialangular-cdk
Alon Blumenreich
Alon Blumenreich

Reputation: 31

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

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.

Upvotes: 3

Views: 4688

Answers (1)

biznisprofil
biznisprofil

Reputation: 51

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).

Upvotes: 3

Related Questions