title: Cannot Close Angular Material Cdkoverlay From BackdropClick
body: <p>I'm currently using the <code>Angular Material cdkoverlay</code> and want to close it when I click anywhere else on the screen except for the overlay.  I've gone aheadand subscribed to <code>backdropClick()</code> but I can't get it to fire.</p>
  
  <pre><code>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(() =&gt; this.close()}, () =&gt; console.log("ERROR"), () =&gt; console.log("COMPLETE"));
  }
  
   close(){
      this._overlayRef.dispose();
  }
  
  &lt;ng-template cdkPortal #columnFilter&gt;
      &lt;mat-card&gt;
          HELLO WORLD
      &lt;/mat-card&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>Everything with creating and launching the overlay works fine, it's just responding to the outside click.</p>
  
  <p>If I add <code>hasBackdrop: true</code> to <code>OverlayConfig</code> then it creates the dark grey backdrop and the click outside works, but I don't want a visiable backdrop, like the selete component.</p>