How to use the @angular/cdk/portal.TemplatePortal function in @angular/cdk

_attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config) {
        // Create a reference to the dialog we're creating in order to give the user a handle
        // to modify and close it.
        const /** @type {?} */ dialogRef = new MatDialogRef(overlayRef, dialogContainer, config.id);
        // When the dialog backdrop is clicked, we want to close it.
        if (config.hasBackdrop) {
            overlayRef.backdropClick().subscribe(() => {
                if (!dialogRef.disableClose) {
                    dialogRef.close();
                }
            });
        }
        // Close when escape keydown event occurs
        overlayRef.keydownEvents().pipe(filter(event => event.keyCode === ESCAPE && !dialogRef.disableClose)).subscribe(() => dialogRef.close());
        if (componentOrTemplateRef instanceof TemplateRef) {
            dialogContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, /** @type {?} */ ((null)), /** @type {?} */ ({ $implicit: config.data, dialogRef })));
        }
        else {
            const /** @type {?} */ injector = this._createInjector(config, dialogRef, dialogContainer);
            const /** @type {?} */ contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, undefined, injector));
            dialogRef.componentInstance = contentRef.instance;
        }
        dialogRef
            .updateSize(config.width, config.height)
            .updatePosition(config.position);
        return dialogRef;
    }
    /**

private _attach(content: ComponentType | TemplateRef, userConfig?: MatSnackBarConfig):
    MatSnackBarRef> {

    const config = {...new MatSnackBarConfig(), ...this._defaultConfig, ...userConfig};
    const overlayRef = this._createOverlay(config);
    const container = this._attachSnackBarContainer(overlayRef, config);
    const snackBarRef = new MatSnackBarRef>(container, overlayRef);

    if (content instanceof TemplateRef) {
      const portal = new TemplatePortal(content, null!, {
        $implicit: config.data,
        snackBarRef
      } as any);

      snackBarRef.instance = container.attachTemplatePortal(portal);
    } else {
      const injector = this._createInjector(config, snackBarRef);
      const portal = new ComponentPortal(content, undefined, injector);
      const contentRef = container.attachComponentPortal(portal);

      // We can't pass this via the injector, because the injector is created earlier.
      snackBarRef.instance = contentRef.instance;
    }

    // Subscribe to the breakpoint observer and attach the mat-snack-bar-handset class as
    // appropriate. This class is applied to the overlay element because the overlay must expand to

_createOverlay(): void {
    if (this._overlayRef) {
      return; // an overlay is already being shown
    }

    const overlayTemplate = this._overlayTemplate();

    if (overlayTemplate) {
      // overlay template has already been loaded
      const portal = new TemplatePortal(
        overlayTemplate,
        this._viewContainerRef,
      );

      // Note: each OverlayConfig can only be used for one overlay instance
      this._overlayRef = this._overlay.create(this._createOverlayConfig());
      this._overlayRef.attach(portal);
    }
  }

private _attachOverlayContent(
    componentOrTemplateRef: ComponentType | TemplateRef,
    container: DtOverlayContainer,
    overlayRef: OverlayRef,
    config: DtOverlayConfig,
  ): DtOverlayRef {
    const dtOverlayRef = new DtOverlayRef(overlayRef, container, config);

    if (componentOrTemplateRef instanceof TemplateRef) {
      const templatePortal =
        // tslint:disable-next-line:no-any
        new TemplatePortal(componentOrTemplateRef, null!, {
          $implicit: config.data,
        });
      container.attachTemplatePortal(templatePortal);
      dtOverlayRef._templatePortal = templatePortal;
    } else {
      const componentRef = container.attachComponentPortal(
        new ComponentPortal(componentOrTemplateRef),
      );
      dtOverlayRef.componentInstance = componentRef.instance;
      dtOverlayRef._templatePortal = null;
    }

    return dtOverlayRef;
  }
}

{overlayX: 'end', overlayY: 'bottom'});

      this.overlayRef = this.overlay.create({
        minWidth: 300,
        maxWidth: 500,
        hasBackdrop: !asTooltip,
        positionStrategy,
        scrollStrategy: this.overlay.scrollStrategies.reposition()
      });

      const sub$ = this.overlayRef.backdropClick().subscribe(
        () => this.hideAttackPatternTooltip(this.attackPattern),
        (err) => console.log(`${new Date().toISOString()} Error using tooltip: ${err}`),
        () => sub$.unsubscribe());

      this.portal = new TemplatePortal(this.apTooltipTemplate, this.vcr);
    } else {
      this.overlayRef.detach();
      this.overlayRef.getConfig().hasBackdrop = !asTooltip;
    }

    this.overlayRef.attach(this.portal);
  }

ngAfterViewInit(): void {
    if (this._containerInstance) {
      this._containerInstance._overlayContentPortal = new TemplatePortal(
        this._overlayContent,
        this._viewContainerRef,
      );
      this._containerInstance._overlayActionsPortal = new TemplatePortal(
        this._overlayActions,
        this._viewContainerRef,
      );
    }
  }

private _getTemplatePortal(tRef: TemplateRef, overlayPanelRef: PblNgridOverlayPanelRef) {
    const context: PblNgridOverlayPanelContext = {
      grid: this.grid,
      ref: overlayPanelRef,
    };
    return new TemplatePortal(tRef, this.vcRef, context);
  }

setTemplate(template: TemplateRef) {
    this.portal = new TemplatePortal(template, this.viewContainerRef);
    this.cdRef.markForCheck();
    this.cdRef.detectChanges();
  }
}

private createPortal() {
        this.portal = new TemplatePortal(
            this.storeService.state.templateRef as TemplateRef,
            this.viewContainerRef
        );
    }

createPortal() {
    return new TemplatePortal(this.templateRef, this.viewContainerRef);
  }