CODEWITHSUNDEEP
angularoverlay
DuFuS
DuFuS

Reputation: 371

Close angular CDK overlay by click button

I'm creating service for modal window with angular cdk overlay and I have followed this tutorial : Tutorial

I would like to somehow pass reference of this overlay to overlayed component because I would like to close this component by clicking on button. Can anybody help me how to pass or extract reference?

I have tried to import FilePreviewOverlayRef in to file-preview-overlay.component but it did not help.

Code

Upvotes: 2

Views: 14608

Answers (2)

J. Jerez
J. Jerez

Reputation: 794

Very simple implementation:

<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin 
    #trigger="cdkOverlayOrigin">
    {{isOpen ? "Close" : "Open"}}
</button>
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen" 
    [cdkConnectedOverlayHasBackdrop]="true"
    (backdropClick)="isOpen = false">
</ng-template>

the backdropClick event close the Overlay.

Upvotes: 3

Buzzinga
Buzzinga

Reputation: 401

Here, I modified your code a bit. That's not an optimal solution but you will have an idea at least.

ComponentPortal has a property called injector that is used for the instantiation of the component. I used that to inject initial data (in your case it is FilePreviewOverlayService) to overlay.

Upvotes: 3

Related Questions