@angular/cdk/portal#ComponentPortal TypeScript Examples

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);
  }

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 attachDialogContainer(component: Type<any>, overlayRef: OverlayRef, config: ModalConfig, modalRef: ModalRef) {
        // PortalInjector() is deprecated
        const injector = Injector.create({
            providers:[
                {provide: ModalRef, useValue: modalRef},
                {provide: MODAL_MODEL, useValue: config.model}
            ], 
            parent:this.injector
        });
        const containerPortal = new ComponentPortal(component, null, injector);
        const containerRef = overlayRef.attach<Type<any>>(containerPortal);

        return containerRef.instance;
    }

@HostListener('mouseenter')
	show() {
		// Create tooltip portal
		const tooltipPortal = new ComponentPortal(ImageTooltipComponent);

		// Attach tooltip portal to overlay
		const tooltipRef: ComponentRef<ImageTooltipComponent> = this.overlayRef.attach(tooltipPortal);

		// Pass content to tooltip component instance
		tooltipRef.instance.imageUrl = this.imageurl;
	}

/**
   * 弹出通知
   * 如果通知已经存在，则更新内容并重新计时
   */
  present(): NotificationController {
    this.dismissTimeout && this.clearDismissTimeout();
    this.subscription && !this.subscription.closed && this.subscription.unsubscribe();

    this.componentRef ??= this.overlayRef.attach(new ComponentPortal(NotificationComponent));
    this.componentRef.instance.overlayRef = this.overlayRef;

    const { title, description, icon, duration, url, handler } = this.options;

    this.componentRef.instance.title = title;
    this.componentRef.instance.description = description;
    this.componentRef.instance.icon = icon;
    this.componentRef.instance.url = url;
    this.componentRef.instance.handler = handler;

    // 监听通知关闭事件
    this.subscription = this.componentRef.instance.onDismiss().pipe(take(1)).subscribe(() => {
      this.clearRef();
      this.clearDismissTimeout();
    });

    // 开始计时
    this.dismissTimeout = this.window.setTimeout(() => this.dismiss(), duration || 5000);

    return this;
  }

_show(): void {
    const tooltipPortal = new ComponentPortal(NpTooltipComponent);
    const tooltipRef: ComponentRef<NpTooltipComponent> = this.overlayRef.attach(
      tooltipPortal
    );
    tooltipRef.instance.tooltip = this.text;
    tooltipRef.instance.context = this.context;
    tooltipRef.instance.width = this.width;
    tooltipRef.instance.styleClass = this.styleClass;
  }

_open(): void {
    const popoverPortal = new ComponentPortal(NpPopoverComponent);
    const popoverRef: ComponentRef<NpPopoverComponent> = this.overlayRef.attach(
      popoverPortal
    );
    popoverRef.instance.header = this.header;
    popoverRef.instance.body = this.body;
    popoverRef.instance.context = this.context;
    popoverRef.instance.width = this.width;
    popoverRef.instance.styleClass = this.styleClass;
    this.onOpen.emit();
  }

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;
  }

@HostListener("click")
  show(): void {
    if (this.overlayRef.hasAttached()) {
      this._close();
      return;
    }
    const menubarPortal = new ComponentPortal(NpMenubarComponent);
    const menubarRef: ComponentRef<NpMenubarComponent> = this.overlayRef.attach(
      menubarPortal
    );
    menubarRef.instance.items = this.items;
    menubarRef.instance.styleClass = this.styleClass;
    menubarRef.instance.inputId = this.inputId;
    menubarRef.instance.onClickMenuItem = this.onClickMenuItem;
  }

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 the calendar as a popup. */
  private _openAsPopup(): void {
    if (!this._calendarPortal) {
      this._calendarPortal = new ComponentPortal<NgxMatDatetimeContent<D>>(NgxMatDatetimeContent,
        this._viewContainerRef);
    }

    if (!this._popupRef) {
      this._createPopup();
    }

    if (!this._popupRef.hasAttached()) {
      this._popupComponentRef = this._popupRef.attach(this._calendarPortal);
      this._popupComponentRef.instance.datepicker = this;
      this._setColor();

      // Update the position once the calendar has rendered.
      this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
        this._popupRef.updatePosition();
      });
    }
  }

/** Open the calendar as a popup. */
  private _openAsPopup(): void {
    if (!this._calendarPortal) {
      this._calendarPortal = new ComponentPortal<NgxMatDatetimeContent<D>>(NgxMatDatetimeContent,
        this._viewContainerRef);
    }

    if (!this._popupRef) {
      this._createPopup();
    }

    if (!this._popupRef.hasAttached()) {
      this._popupComponentRef = this._popupRef.attach(this._calendarPortal);
      this._popupComponentRef.instance.datepicker = this;
      this._setColor();

      // Update the position once the calendar has rendered.
      this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
        this._popupRef.updatePosition();
      });
    }
  }

/** Open the calendar as a popup. */
  private _openAsPopup(): void {

    if (!this._portal) {
      this._portal = new ComponentPortal<NgxMatColorPickerContentComponent>(NgxMatColorPickerContentComponent,
        this._viewContainerRef);
    }

    if (!this._popupRef) {
      this._createPopup();
    }

    if (!this._popupRef.hasAttached()) {
      this._popupComponentRef = this._popupRef.attach(this._portal);
      this._popupComponentRef.instance.picker = this;
      this._setColor();

      // Update the position once the calendar has rendered.
      this._zone.onStable.asObservable().pipe(take(1)).subscribe(() => {
        this._popupRef.updatePosition();
      });
    }
  }

private attachComponentToDom(select: string, component: any) {

    const selector = (document.querySelector('#' + select));
    // if (selector!==null){
    this.portalHost = new DomPortalOutlet(
      selector,
      this.componentFactoryResolver,
      this.appRef,
      this.injector
    );
    this.portal = new ComponentPortal(component);
    if (this.portalHost != undefined) {
      this.portalHost.attach(this.portal);
    }

  }

ngAfterViewInit(): void {
    const selector = (document.querySelector('#' + this.selector));
    // if (selector!==null){
    this.portalHost = new DomPortalOutlet(
      selector,
      this.componentFactoryResolver,
      this.appRef,
      this.injector
    );
    this.portal = new ComponentPortal(this.component);
    if (this.portalHost != undefined)
      this.portalHost.attach(this.portal);
    // }

  }

protected initComponentRef(config: Config): ComponentRef<Component> {
    const portalHost = new DomPortalOutlet(
      this.wrapperInstance.elementRef.nativeElement,
      this.cfr,
      this.applicationRef,
      this.injector,
    );
    const componentRef = portalHost.attachComponentPortal(
      new ComponentPortal(this.componentClass),
    );
    componentRef.instance.setConfig(config);
    return componentRef;
  }

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);
  }

openNotifyMenu(): void {
		const overlayRef = this.overlay.create({
			panelClass: 'overlay-content-top-right',
			hasBackdrop: false
		});

		const portal = new ComponentPortal(NotifyMenuComponent);
		const component = overlayRef.attach(portal);

		component.instance.closed.pipe(
			take(1)
		).subscribe({
			next(): void {
				overlayRef.detach();
				overlayRef.dispose();
			}
		});
	}

openWardrobe(): void {
		const overlayRef = this.overlay.create({
			panelClass: 'overlay-content-top-right',
			hasBackdrop: false,
		});

		const portal = new ComponentPortal(WardrobeComponent);
		const component = overlayRef.attach(portal);

		component.instance.closed.pipe(
			take(1)
		).subscribe({
			next(): void {
				overlayRef.detach();
				overlayRef.dispose();
			}
		});
	}

constructor(
    private overlay: Overlay,
    private characterService: CharacterService,
  ) {
    this.overlayRef = this.overlay.create({
      panelClass: 'rich-tooltip-view'
    });
    this.view = new ComponentPortal(TooltipViewComponent);
  }

ngAfterContentInit() {
    const containerEl = this.containerEl;
    this.anchorPortal = new ComponentPortal(AnchorComponent);
    const portalOutlet = new DomPortalOutlet(
      document.body,
      this.cfr,
      this.appRef,
      this.injector,
    );
    const anchorComponentRef = this.anchorPortal.attach(portalOutlet);
    const anchorEl = anchorComponentRef.injector.get(ElementRef)
      .nativeElement as HTMLElement;

    requestAnimationFrame(() =>
      this.adaptAnchorPosition(containerEl, anchorEl),
    );

    this.anchorLabels.changes
      .pipe(startWith(this.anchorLabels), takeUntil(this.destroy$$))
      .subscribe((anchorLabels: QueryList<AnchorLabelDirective>) => {
        Object.assign(anchorComponentRef.instance, {
          items: anchorLabels.toArray(),
        });
      });
  }

private attachDialog(
    overlayRef: OverlayRef,
    config: DialogConfig,
  ): DialogComponent {
    const dialogPortal = new ComponentPortal(
      DialogComponent,
      config.viewContainerRef,
    );
    const dialogRef = overlayRef.attach(dialogPortal);
    dialogRef.instance.config = config;
    return dialogRef.instance;
  }

private attachDialogContent<T, D, R>(
    compOrTempRef: ComponentType<T> | TemplateRef<T>,
    dialogIns: DialogComponent,
    overlayRef: OverlayRef,
    config: DialogConfig<D>,
  ): DialogRef<T, R> {
    const dialogRef = new DialogRef<T, R>(
      overlayRef,
      dialogIns,
      this.scrollDispatcher,
      this.ngZone,
    );

    if (compOrTempRef instanceof TemplateRef) {
      dialogIns.attachTemplatePortal(
        new TemplatePortal(compOrTempRef, null, {
          $implicit: config.data,
        } as any),
      );
    } else {
      const injector = this.createInjector(config, dialogRef, dialogIns);
      const contentRef = dialogIns.attachComponentPortal<T>(
        new ComponentPortal(compOrTempRef, null, injector),
      );
      dialogRef.componentInstance = contentRef.instance;
    }
    return dialogRef;
  }

createTooltip() {
    if (this.disabled || this.isCreated) {
      return;
    }
    this.overlayRef = this.createOverlay();
    const portal = new ComponentPortal(
      this.componentClass,
      this.viewContainerRef,
    );
    this.componentIns = this.overlayRef.attach(portal).instance;
    this.componentIns.setupInputs({
      inputClass$: this.inputClass$$.asObservable(),
      inputContent$: this.inputContent$$.asObservable(),
      inputContext$: this.inputContext$$.asObservable(),
      inputPosition$: this.inputPosition$$.asObservable(),
      inputType$: this.inputType$$.asObservable(),
    });

    if (this.trigger === TooltipTrigger.Hover) {
      this.componentIns.hover$.subscribe(hovered => {
        this.onTooltipHovered(hovered);
      });
    }
    if (
      this.trigger === TooltipTrigger.Hover ||
      this.trigger === TooltipTrigger.Click
    ) {
      this.unlistenBody = this.renderer.listen(
        'body',
        'click',
        this.onBodyClick.bind(this),
      );
    }

    this.show.emit();

    this.cdr.markForCheck();
  }

private createDrawer(): void {
    this.overlayRef = this.overlay.create();
    this.drawerRef = this.overlayRef.attach(
      new ComponentPortal(DrawerComponent),
    );
    this.drawerRef.instance.drawerViewInit
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(() => {
        this.drawerRef.instance.open();
      });

    this.drawerRef.instance.afterClosed
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(() => {
        this.overlayRef.dispose();
        this.drawerRef = null;
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
      });
  }

private attachBodyContent(): void {
    this.bodyPortalOutlet?.dispose();
    const content = this.content || this.contentTemplate;
    if (content instanceof Type) {
      const componentPortal = new ComponentPortal<T>(
        content,
        null,
        Injector.create({
          providers: [
            {
              provide: DATA,
              useValue: this.contentParams,
            },
          ],
          parent: this.injector,
        }),
      );
      const componentRef =
        this.bodyPortalOutlet?.attachComponentPortal(componentPortal);
      this.componentInstance = componentRef.instance;
      Object.assign(componentRef.instance, this.contentParams);
      componentRef.changeDetectorRef.detectChanges();
    }
  }

goStep(step: number): void {
    this.componentPortal = new ComponentPortal(this.stepComponentArray[step]);
    this.selectedPortal = this.componentPortal;
  }

protected initWrapperContainer() {
    this.wrapperInstance = this.overlay
      .create({
        panelClass: this.overlayPaneClassName,
      })
      .attach(new ComponentPortal(this.wrapperClass)).instance;
  }

@HostListener("mouseenter", ['$event'])
  show(event: MouseEvent) {
    event.preventDefault();
    event.stopPropagation();

    // The tooltip is already showing: just cancel the hiding
    if(this.clearTimeout) {
      clearTimeout(this.clearTimeout);
      return;
    }

    this.clearSubscription();

    if(!this.text) return;

    let obs: Observable<string|undefined>;

    if(Utils.isFunction(this.text)) {
      obs = this.text(this.data);
    }
    else {
      obs = of(this.text)
        .pipe(delay(this.delay))
    }

    this.subscription = obs.subscribe(text => {
      this.overlayRef?.detach();

      if(!text?.trim().length) return;
  
      const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions([this.position()]);
      
      const scrollStrategy = this.overlay.scrollStrategies.close();
      this.overlayRef = this.overlay.create({positionStrategy, scrollStrategy});
      
      const tooltipRef = this.overlayRef.attach(new ComponentPortal(TooltipComponent));
      tooltipRef.instance.text = text;
    });
  }