I have a component I want to open when certain buttons are clicked, and closed when anywhere outside the component is closed. I decided I could use cdkOverlay for this, but I am not very familiar with it and I am have a hard time getting it to work properly this is a simple diagram of what I am trying to achieve:
There are two buttons in component1 and component2 that can open the overlay. the overlay is always next to component1. The way the app is structured, i am triggering the overlay component via a service. and I have it declared in component1. When I try to use cdkOverlay i get the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'width')
at FlexibleConnectedPositionStrategy._getOriginRect
And here's a snipped of the code I have so far (in component1):
<ng-container>
... several divs and components
</ng-container>
<ng-template
cdkConnectedOverlay
[cdkConnectedOverlayOpen]="isOpen"
(overlayOutsideClick)="outside()"
>
<div class="container">
...rest of overlay component
</div>
</ng-template>
and the css:
.container {
height:400px;
width: 150px;
position: absolute;
top: 0;
left: -161px;
}
:host {
position: absolute;
width: 100%;
display: flex;
flex-direction: column;
height: calc(100vh - #{$vertical-menu-heading-height});
margin: (-$sidebar-margin-vertical) (-$sidebar-margin-horizontal);
padding: ($sidebar-margin-vertical + 10px) $sidebar-margin-horizontal 0 $sidebar-margin-horizontal;
}
:host.collapsed-view {
position: initial;
margin: 0;
padding: 0;
}
I can show the component fine. Only when I tried introducing the cdkoverlay to be able to hide it when clicking outside is that it stopped working.
I'm hoping (I'm pretty sure) it is just something simple that will fix it that I just don't know about. I'd appreciate any suggestion on how to make it work and let it be positioned correctly!
Thanks!