In my project I'm using md2 components and angular material dialog component.
After running my code in my browser, when I open a md2-select or a md2-datepicker, it adds a cdk-overlay-container
div to the page's body
:
<div class="cdk-overlay-container"></div>
Every time I use an md2 component which needs an overlay, it uses the existing one. This is the normal behavior.
My problem comes when I open a material dialog once this first md2 OverlayContainer
is created. Instead of using the existing OverlayContainer
, the material dialog create a new one. It causes some problems with z-index. Why material dialog doesn't uses the existing OverlayContainer
?
When I take a look at the OverlayContainer
code, I can see this comment:
/**
* The OverlayContainer is the container in which all overlays will load.
* It should be provided in the root component to ensure it is properly shared.
*/
How can I provide this container to the root component to ensure to have only one OverlayContainer
?