Method attachOverlay

src/cdk/overlay/overlay-directives.ts:470–510

Attaches the overlay.

()

  /** Attaches the overlay. */
  attachOverlay() {
    if (!this._overlayRef) {
      this._createOverlay();
    }

    const ref = this._overlayRef!;

    // Update the overlay size, in case the directive's inputs have changed
    ref.getConfig().hasBackdrop = this.hasBackdrop;
    ref.updateSize({width: this._getWidth()});

    if (!ref.hasAttached()) {
      ref.attach(this._templatePortal);
    }

    if (this.hasBackdrop) {
      this._backdropSubscription = ref
        .backdropClick()
        .subscribe(event => this.backdropClick.emit(event));
    } else {
      this._backdropSubscription.unsubscribe();
    }

    this._positionSubscription.unsubscribe();

    // Only subscribe to `positionChanges` if requested, because putting
    // together all the information for it can be expensive.
    if (this.positionChange.observers.length > 0) {
      this._positionSubscription = this._position!.positionChanges.pipe(
        takeWhile(() => this.positionChange.observers.length > 0),
      ).subscribe(position => {
        this._ngZone.run(() => this.positionChange.emit(position));

        if (this.positionChange.observers.length === 0) {
          this._positionSubscription.unsubscribe();
        }
      });
    }

    this.open = true;
  }

  /** Detaches the overlay. */
  detachOverlay() {