Cannot Close Angular Material Cdkoverlay From BackdropClick

Question

I'm currently using the Angular Material cdkoverlay and want to close it when I click anywhere else on the screen except for the overlay. I've gone aheadand subscribed to backdropClick() but I can't get it to fire.

launchOverlay() {
        let strategy = this.overlay.position()
        .connectedTo(
            this._overlayOrigin,
            {originX: 'end', originY: 'top'},
            {overlayX: 'end', overlayY: 'top'} );
        let config = new OverlayConfig({positionStrategy: strategy, width: '280px', scrollStrategy: this.overlay.scrollStrategies.reposition()});
        this._overlayRef = this.overlay.create(config);
        this._overlayRef.attach(new TemplatePortal(this.filterTemplate, this.viewContainerRef));
        this._overlayRef.backdropClick().subscribe(() => this.close()}, () => console.log("ERROR"), () => console.log("COMPLETE"));
}

 close(){
    this._overlayRef.dispose();
}

<ng-template cdkPortal #columnFilter>
    <mat-card>
        HELLO WORLD
    </mat-card>
</ng-template>

Everything with creating and launching the overlay works fine, it's just responding to the outside click.

If I add hasBackdrop: true to OverlayConfig then it creates the dark grey backdrop and the click outside works, but I don't want a visiable backdrop, like the selete component.

Answer 1

hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop'

Adds the transparent backdrop inwhich the select and other components use.

Answer 2

In case if someone is using template and directives then you can use cdkConnectedOverlayHasBackdrop and cdkConnectedOverlayBackdropClass directives.

And for transparent backdrop use the css class cdk-overlay-transparent-backdrop

<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayHasBackdrop]="true"
    [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'" [cdkConnectedOverlayOpen]="isDropdownOpen"
    (backdropClick)="toggleDropdown()">