@angular/cdk/overlay#OverlayConfig TypeScript Examples

private __getOverlayConfig(): OverlayConfig {
    // override overlay to avoid resizing of popups
    const positionStrategy = this.__overlay.position()
      .flexibleConnectedTo(this.__elementRef)
      .withPush(true)
      .withFlexibleDimensions(false)
      .withTransformOriginOn('.mat-menu-panel, .mat-mdc-menu-panel');

    // patch positionStrategy to disable push for Y axis
    const curGetExactOverlayY = positionStrategy['_getExactOverlayY'];

    positionStrategy['_getExactOverlayY'] = (...args) => {
      const curIsPushed = positionStrategy['_isPushed'];
      positionStrategy['_isPushed'] = false;
      const value = curGetExactOverlayY.call(positionStrategy, ...args);
      positionStrategy['_isPushed'] = curIsPushed;
      return value;
    };

    this._componentSubscription.add(positionStrategy.positionChanges.subscribe(position => {
      if (!this._lastPosition || this._lastPosition.originX !== position.connectionPair.originX ||
        this._lastPosition.originY !== position.connectionPair.originY) {
        // selected position changed, we must run detect changes to update arrow css
        this._lastPosition = position.connectionPair;
        this.ngZone.run(() => setTimeout(() => {}));
      }
    }));

    return new OverlayConfig({
      positionStrategy,
      scrollStrategy: this.__scrollStrategy(),
      direction: this.__dir
    });
  }

public static openAsOverlay(config: {anchor: HTMLElement; routerOutlet: SciRouterOutletElement; overlay: Overlay; injector: Injector}): void {
    const {anchor, routerOutlet, overlay, injector} = config;

    const positionStrategy = overlay.position()
      .flexibleConnectedTo(anchor)
      .withFlexibleDimensions(false)
      .withPositions([OVERLAY_POSITION_SOUTH]);

    const overlayConfig = new OverlayConfig({
      panelClass: 'e2e-router-outlet-context-overlay',
      hasBackdrop: true,
      positionStrategy: positionStrategy,
      scrollStrategy: overlay.scrollStrategies.noop(),
      disposeOnNavigation: true,
      width: 500,
      height: 400,
      backdropClass: 'transparent-backdrop',
    });

    const overlayRef = overlay.create(overlayConfig);
    const portal = new ComponentPortal(RouterOutletContextComponent, null, Injector.create({
      parent: injector,
      providers: [
        {provide: OverlayRef, useValue: overlayRef},
        {provide: SciRouterOutletElement, useValue: routerOutlet},
      ],
    }));
    overlayRef.attach(portal);
  }

public static openAsOverlay(config: {anchor: HTMLElement; routerOutlet: SciRouterOutletElement; overlay: Overlay; injector: Injector}): void {
    const {anchor, routerOutlet, overlay, injector} = config;

    const positionStrategy = overlay.position()
      .flexibleConnectedTo(anchor)
      .withFlexibleDimensions(false)
      .withPositions([OVERLAY_POSITION_SOUTH]);

    const overlayConfig = new OverlayConfig({
      panelClass: 'e2e-router-outlet-settings-overlay',
      hasBackdrop: true,
      positionStrategy: positionStrategy,
      scrollStrategy: overlay.scrollStrategies.noop(),
      disposeOnNavigation: true,
      width: 350,
      backdropClass: 'transparent-backdrop',
    });

    const overlayRef = overlay.create(overlayConfig);
    const portal = new ComponentPortal(RouterOutletSettingsComponent, null, Injector.create({
      parent: injector,
      providers: [
        {provide: OverlayRef, useValue: overlayRef},
        {provide: SciRouterOutletElement, useValue: routerOutlet},
      ],
    }));
    overlayRef.attach(portal);
  }

private getOverlayConfig(dialogConfig: DialogConfig): OverlayConfig {
    return {
      positionStrategy: this.overlay.position().global(),
      scrollStrategy: this.overlay.scrollStrategies.block(),
      hasBackdrop: dialogConfig.hasBackdrop && !this.openDialogs.length,
      backdropClass: DialogService.DIALOG_BACKDROP_CLASS,
      panelClass: DialogService.DIALOG_OVERLAY_PANE_CLASS,
      width: '100vw',
      height: '100vh',
    };
  }

protected createOverlay(): OverlayRef {
    const originPosition = getOriginPosition(this.position);
    const overlayPosition = getOverlayPosition(this.position);

    const positionStrategy = this.overlay
      .position()
      .flexibleConnectedTo(this.elRef)
      .withGrowAfterOpen(true)
      .withPositions([
        { ...originPosition.main, ...overlayPosition.main },
        { ...originPosition.fallback, ...overlayPosition.fallback },
      ]);

    const scrollStrategy = this.overlay.scrollStrategies.reposition();

    const config = new OverlayConfig({
      positionStrategy,
      scrollStrategy,
    });
    return this.overlay.create(config);
  }

/** Create the popup. */
  private _createPopup(): void {
    const overlayConfig = new OverlayConfig({
      positionStrategy: this._createPopupPositionStrategy(),
      hasBackdrop: true,
      backdropClass: 'mat-overlay-transparent-backdrop',
      direction: this._dir,
      scrollStrategy: this._scrollStrategy(),
      panelClass: 'mat-colorpicker-popup',
    });

    this._popupRef = this._overlay.create(overlayConfig);
    this._popupRef.overlayElement.setAttribute('role', 'dialog');

    merge(
      this._popupRef.backdropClick(),
      this._popupRef.detachments(),
      this._popupRef.keydownEvents().pipe(filter(event => {
        // Closing on alt + up is only valid when there's an input associated with the datepicker.
        return event.keyCode === ESCAPE ||
          (this._pickerInput && event.altKey && event.keyCode === UP_ARROW);
      }))
    ).subscribe(event => {
      if (event) {
        event.preventDefault();
      }

      this.close();
    });
  }

/** Create the popup. */
  private _createPopup(): void {
    const overlayConfig = new OverlayConfig({
      positionStrategy: this._createPopupPositionStrategy(),
      hasBackdrop: this._hasBackdrop,
      backdropClass: 'mat-overlay-transparent-backdrop',
      direction: this._dir,
      scrollStrategy: this._scrollStrategy(),
      panelClass: 'mat-datepicker-popup',
    });

    this._popupRef = this._overlay.create(overlayConfig);
    this._popupRef.overlayElement.setAttribute('role', 'dialog');

    merge(
      this._popupRef.backdropClick(),
      this._popupRef.detachments(),
      this._popupRef.keydownEvents().pipe(filter(event => {
        // Closing on alt + up is only valid when there's an input associated with the datepicker.
        return event.keyCode === ESCAPE ||
          (this._datepickerInput && event.altKey && event.keyCode === UP_ARROW);
      }))
    ).subscribe(event => {
      if (event) {
        event.preventDefault();
      }

      (this._hasBackdrop && event) ? this.cancel() : this.close();

    });
  }

/** Create the popup. */
  private _createPopup(): void {
    const overlayConfig = new OverlayConfig({
      positionStrategy: this._createPopupPositionStrategy(),
      hasBackdrop: this._hasBackdrop,
      backdropClass: 'mat-overlay-transparent-backdrop',
      direction: this._dir,
      scrollStrategy: this._scrollStrategy(),
      panelClass: 'mat-datepicker-popup',
    });

    this._popupRef = this._overlay.create(overlayConfig);
    this._popupRef.overlayElement.setAttribute('role', 'dialog');

    merge(
      this._popupRef.backdropClick(),
      this._popupRef.detachments(),
      this._popupRef.keydownEvents().pipe(filter(event => {
        // Closing on alt + up is only valid when there's an input associated with the datepicker.
        return event.keyCode === ESCAPE ||
          (this._datepickerInput && event.altKey && event.keyCode === UP_ARROW);
      }))
    ).subscribe(event => {
      if (event) {
        event.preventDefault();
      }

      (this._hasBackdrop && event) ? this.cancel() : this.close();

    });
  }

open(
    content: string | TemplateRef<any>,
    config: NpDialogConfig,
    data: any
  ): NpDialogRef {
    const positionStrategy = this.overlayPositionBuilder
      .global()
      .centerHorizontally()
      .centerVertically();
    if (!config) {
      config = new NpDialogConfig({});
    }
    const overlayConfig = new OverlayConfig({
      positionStrategy,
      hasBackdrop: config.hasBackDrop,
      backdropClass: config.backDropClass || "np-dialog-backdrop",
      scrollStrategy: this.overlay.scrollStrategies.block(),
      panelClass: "np-dialog-overlay",
    });
    const overlayRef = this.overlay.create(overlayConfig);
    const myOverlayRef = new NpDialogRef(overlayRef, content, config, data);
    const injector = Injector.create({
      parent: this.injector,
      providers: [{ provide: NpDialogRef, useValue: myOverlayRef }],
    });

    overlayRef.attach(new ComponentPortal(NpDialogContainerComponent, null, injector));

    return myOverlayRef;
  }

open(
    content: string | TemplateRef<any> | Type<any>,
    config: NpModalConfig,
    data: any
  ): NpModalRef {
    const positionStrategy = this.overlayPositionBuilder
      .global()
      .centerHorizontally()
      .centerVertically();

    if (!config) {
      config = new NpModalConfig({});
    }

    const overlayConfig = new OverlayConfig({
      positionStrategy,
      hasBackdrop: config.hasBackDrop,
      backdropClass: config.backDropClass || "np-modal-backdrop",
      height: config.height,
      width: config.width,
      scrollStrategy: this.overlay.scrollStrategies.block(),
      panelClass: "np-modal-overlay",
    });
    const overlayRef = this.overlay.create(overlayConfig);
    const myOverlayRef = new NpModalRef(overlayRef, content, config, data);
    const injector = Injector.create({
      parent: this.injector,
      providers: [{ provide: NpModalRef, useValue: myOverlayRef }],
    });
    overlayRef.attach(
      new ComponentPortal(NpModalContainerComponent, null, injector)
    );
    return myOverlayRef;
  }

constructor(
    private overlay: Overlay,
    @Inject(WINDOW) private window: Window,
  ) {
    this.overlayConfig = new OverlayConfig({
      // 全局显示，水平居中，位于顶部
      positionStrategy: this.overlay.position().global().centerHorizontally().top()
    });
  }

private getOverlayConfig(config: ModalConfig): OverlayConfig {
        const positionStrategy = this.overlay.position()
            .global()
            .centerHorizontally()
            .centerVertically();

        const overlayConfig = new OverlayConfig({
            hasBackdrop: config.hasBackdrop,
            backdropClass: config.backdropClass,
            panelClass: config.panelClass,
            scrollStrategy: this.overlay.scrollStrategies.block(),
            positionStrategy
        });

        return overlayConfig;
    }

open(): OverlayRef {
    if (this.overlayRef) {
      return this.overlayRef;
    }
    const positionStrategy: GlobalPositionStrategy = this.overlay
      .position()
      .global()
      .centerHorizontally()
      .centerVertically();
    const overlayConfig = new OverlayConfig({
      hasBackdrop: true,
      positionStrategy,
    });
    const overlayRef = this.overlay.create(overlayConfig);
    const portal = new ComponentPortal(SpinnerLoaderComponent);
    overlayRef.attach(portal);
    this.overlayRef = overlayRef;
    return this.overlayRef;
  }

private getOverlayConfig(): OverlayConfig {
    return new OverlayConfig({
      panelClass: DRAWER_OVERLAY_CLASS,
      positionStrategy: this.overlay.position().global(),
      scrollStrategy: this.overlay.scrollStrategies.block(),
    });
  }

private overlayConfig: OverlayConfig;