@angular/cdk/portal#TemplatePortal TypeScript Examples

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

ngAfterViewInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions(TopBottomOverlayPositions);
    this.overlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true,
      backdropClass: "np-dropdown-backdrop",
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      panelClass: this.styleClass,
    });
    this.templatePortal = new TemplatePortal(
      this.templatePortalContent,
      this.viewContainerRef
    );
    this.overlayRef.backdropClick().subscribe(() => this._close());
  }

ngOnInit(): void {
    if (this.title instanceof TemplateRef) {
      this.isTitleTemplate = true;
    }
    if (this.isOpen) {
      if (!this._contentPortal && this._explicitContent) {
        this._contentPortal = new TemplatePortal(
          this._explicitContent,
          this._viewContainerRef
        );
      }
    }
  }

ngAfterViewInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions(TopBottomOverlayPositions);
    this.overlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true,
      backdropClass: "np-date-picker-backdrop",
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      panelClass: this.styleClass,
    });
    this.templatePortal = new TemplatePortal(
      this.templatePortalContent,
      this.viewContainerRef
    );
    this.overlayRef.backdropClick().subscribe(() => this._close());
  }

_toggle(): void {
    if (this.disabled || !this.allowToMinimize || this.isZoom) {
      return;
    }
    if (this.isOpen) {
      this.isOpen = false;
      this.onCollapse.emit(this);
      return;
    }
    this.isOpen = true;
    if (!this._contentPortal && this._explicitContent) {
      this._contentPortal = new TemplatePortal(
        this._explicitContent,
        this._viewContainerRef
      );
    }
    this.onExpand.emit(this);
  }

ngAfterViewInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(
        this.elementRef.nativeElement.querySelector("#btn-column-chooser")
      )
      .withPositions(TopBottomOverlayPositions);
    this.columnChooserOverlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true,
      backdropClass: "np-grid-backdrop",
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
    });
    this.columnChooserTemplatePortal = new TemplatePortal(
      this.columnChooserTemplate,
      this.viewContainerRef
    );
    this.columnChooserOverlayRef
      .backdropClick()
      .subscribe(() => this._closeColumnChooser());
    this.onAfterInit.emit();
  }

ngAfterViewInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions(TopBottomOverlayPositions);
    this.overlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true,
      backdropClass: "np-color-picker-backdrop",
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      panelClass: this.styleClass,
    });
    this.templatePortal = new TemplatePortal(
      this.templatePortalContent,
      this.viewContainerRef
    );
    this.overlayRef.backdropClick().subscribe(() => this._close());

    if (this.defaultOpen) {
      setTimeout(() => {
        this._updateStripCanvas();
        this._updateBlockCanvas();
      }, 10);
    }
  }

ngAfterViewInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions(TopBottomOverlayPositions);
    this.overlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true,
      backdropClass: "np-auto-complete-backdrop",
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      panelClass: this.styleClass,
    });
    this.templatePortal = new TemplatePortal(
      this.templatePortalContent,
      this.viewContainerRef
    );
    this.overlayRef.backdropClick().subscribe(() => this._close());
  }

_expand(): void {
    if (this.disabled) {
      return;
    }
    this.isOpen = true;
    if (!this._contentPortal && this._explicitContent) {
      this._contentPortal = new TemplatePortal(
        this._explicitContent,
        this._viewContainerRef
      );
    }
    this._onExpand.emit(this);
  }

ngOnInit(): void {
    if (this.title instanceof TemplateRef) {
      this.isTitleTemplate = true;
    }
    if (this.isOpen) {
      if (!this._contentPortal && this._explicitContent) {
        this._contentPortal = new TemplatePortal(
          this._explicitContent,
          this._viewContainerRef
        );
      }
    }
  }

ngOnInit(): void {
    if (this.title instanceof TemplateRef) {
      this.titleIsTemplate = true;
    }
    this._contentPortal = new TemplatePortal(
      this._explicitContent || this._implicitContent,
      this._viewContainerRef
    );
  }

ngAfterViewInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions(TopBottomOverlayPositions);
    this.overlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true,
      backdropClass: "np-tags-backdrop",
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      panelClass: this.styleClass,
    });
    this.templatePortal = new TemplatePortal(
      this.templatePortalContent,
      this.viewContainerRef
    );
    this.overlayRef.backdropClick().subscribe(() => this._close());
  }

/**
   * Attach a TemplatePortal as content to this modal container.
   * @param portal Portal to be attached as the modal content.
   */
  private attachTemplatePortal<C>(
    portal: TemplatePortal<C>,
  ): EmbeddedViewRef<C> {
    return this.portalOutlet.attachTemplatePortal(portal);
  }

override setConfig(config: NotificationConfig) {
    super.setConfig(config);
    this.title = config.title;
    this.remains = Math.ceil(this.duration / 1000);
    this.customClass = config.customClass || '';

    if (config.contentRef) {
      if (config.contentRef instanceof TemplateRef) {
        const portal = new TemplatePortal(config.contentRef, null, {
          $implicit: config.context,
        });
        this.attachTemplatePortal(portal);
      } else {
        this.attachComponentRef(config.contentRef);
      }
    }

    if (config.footerRef && config.footerRef instanceof TemplateRef) {
      this.footerPortal = new TemplatePortal(config.footerRef, null, {
        $implicit: config.context,
      });
    }
  }

ngAfterViewInit(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions(TopBottomOverlayPositions);
    this.overlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true,
      backdropClass: "np-time-picker-backdrop",
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      panelClass: this.styleClass,
    });
    this.templatePortal = new TemplatePortal(
      this.templatePortalContent,
      this.viewContainerRef
    );
    this.overlayRef.backdropClick().subscribe(() => this._close());
  }

attach(context?: any) {
    if (this.portal?.isAttached) {
      return;
    }
    if (!this.portal) {
      this.portal = new TemplatePortal(this.templateRef, this.viewContainerRef);
    }
    if (!this.outlet) {
      this.outlet = new DomPortalOutlet(
        this.doc.createElement('div'),
        this.componentFactoryResolver,
        this.appRef,
        this.injector,
      );
    }
    const el = this.templateRef.elementRef.nativeElement as HTMLElement;
    el.parentNode.insertBefore(this.outlet.outletElement, el);
    this.portal.attach(this.outlet, context);
  }

private attachOverlay() {
    if (!this.overlayRef) {
      this.portal = new TemplatePortal(
        this.drawerTemplate,
        this.viewContainerRef,
      );
      this.overlayRef = this.overlay.create(this.getOverlayConfig());
    }
    if (this.overlayRef) {
      this.overlayRef.attach(this.portal);
      this.overlayRef
        .outsidePointerEvents()
        .pipe(takeUntil(this.onDestroy$))
        .subscribe(event => {
          // 判断鼠标点击事件的 target 是否为 overlay-container 的子节点，如果是，则不关闭 drawer。
          // 为了避免点击 drawer 里的 tooltip 后 drawer 被关闭。
          if (
            this.visible &&
            this.hideOnClickOutside &&
            event.target instanceof Node &&
            !this.overlayRef.hostElement?.parentNode?.contains(event.target)
          ) {
            event.stopPropagation();
            event.preventDefault();
            this.dispose();
          }
        });
    }
  }

private _contentPortal: TemplatePortal | null = null;

private templatePortal: TemplatePortal<any>;

private templatePortal: TemplatePortal<any>;

private _contentPortal: TemplatePortal | null = null;

open(data: any): Subject<any> {
    // if overlay is not attached then only attach
    if (this.overlayRef === undefined || !this.overlayRef.hasAttached()) {
      const positionStrategy = this.overlayPositionBuilder.global();
      if (this.position === "left") {
        positionStrategy.left("0");
      }
      if (this.position === "right") {
        positionStrategy.right("0");
      }
      if (this.position === "top") {
        positionStrategy.top("0");
      }
      if (this.position === "bottom") {
        positionStrategy.bottom("0");
      }
      this.overlayRef = this.overlay.create({
        positionStrategy,
        hasBackdrop: this.hasBackDrop,
        backdropClass: this.backDropClass,
        height: this.height,
        width: this.width,
        scrollStrategy: this.overlay.scrollStrategies.block(),
        panelClass: "np-sidepanel-overlay",
      });
      this.templatePortal = new TemplatePortal(
        this.templatePortalContent,
        this.viewContainerRef
      );
      this.overlayRef.backdropClick().subscribe(() => {
        if (this.closeOnClickOutside) {
          this.close(null);
        }
      });
      if (!this._contentPortal && this._explicitContent) {
        this._contentPortal = new TemplatePortal(
          this._explicitContent,
          this.viewContainerRef
        );
      }
      this.overlayRef.attach(this.templatePortal);
      this.onOpen.emit(data);
      return this.sidepanelRef;
    }
    return null;
  }

private _contentPortal: TemplatePortal | null = null;

attachTemplatePortal<T>(portal: TemplatePortal<T>): EmbeddedViewRef<T> {
    if (this.portalOutlet.hasAttached()) {
      throwDialogContentAlreadyAttachedError();
    }
    this.blurActiveElement();
    return this.portalOutlet.attachTemplatePortal(portal);
  }

private templatePortal: TemplatePortal<any>;

private templatePortal: TemplatePortal<any>;

private templatePortal: TemplatePortal<any>;

private columnChooserTemplatePortal: TemplatePortal<any>;

private templatePortal: TemplatePortal<any>;