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

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
    // fill the width of the screen for full width snackbars.
    this._breakpointObserver.observe(Breakpoints.HandsetPortrait).pipe(
      takeUntil(overlayRef.detachments())
    ).subscribe(state => {
      const classList = overlayRef.overlayElement.classList;
      const className = 'mat-snack-bar-handset';
      state.matches ? classList.add(className) : classList.remove(className);
    });

public show(menu:OpContextMenuHandler, event:JQuery.TriggeredEvent, component:any = OPContextMenuComponent) {
    this.close();

    // Create a portal for the given component class and render it
    this.isOpening = true;
    const portal = new ComponentPortal(component, null, this.injectorFor(menu.locals));
    this.bodyPortalHost.attach(portal);
    this.portalHostElement.style.display = 'block';
    this.active = menu;

    setTimeout(() => {
      this.reposition(event);
      // Focus on the first element
      this.active && this.active.onOpen(this.activeMenu);
      this.isOpening = false;
    });
  }

private _attachKeyboardContainer(overlayRef: OverlayRef, config: MatKeyboardConfig): MatKeyboardContainerComponent {
    const containerPortal = new ComponentPortal(MatKeyboardContainerComponent, config.viewContainerRef);
    const containerRef: ComponentRef = overlayRef.attach(containerPortal);

    // set config
    containerRef.instance.keyboardConfig = config;

    return containerRef.instance;
  }

container,
      this.pathHelper,
      errors
    );

    fieldHandler
      .onDestroy
      .pipe(take(1))
      // Don't call .dispose() on the outlet, it destroys the DOM element
      .subscribe(() => outlet.detach());

    // Create an injector that contains injectable reference to the edit field and handler
    const localInjector = createLocalInjector(injector, form.change, fieldHandler, schema);

    // Create a portal for the edit-form/field
    const portal = new ComponentPortal(EditFormPortalComponent, null, localInjector);

    // Clear the container
    container.innerHTML = '';

    // Attach the portal to the outlet
    const ref = outlet.attachComponentPortal(portal);

    // Wait until the content is initialized
    return ref
      .instance
      .onEditFieldReady
      .pipe(
        take(1)
      )
      .toPromise()
      .then(() => fieldHandler);

protected createPortal(): ComponentPortal {
        return this._portal || new ComponentPortal(TooltipComponent, this._viewContainerRef);
    }

beforeEach(inject([Overlay], (overlay: Overlay) => {
    let overlayConfig = new OverlayConfig({scrollStrategy: overlay.scrollStrategies.close()});
    overlayRef = overlay.create(overlayConfig);
    componentPortal = new ComponentPortal(MozarellaMsg);
  }));

private _attachSnackBarContainer(overlayRef: OverlayRef,
                                   config: MatSnackBarConfig): MatSnackBarContainer {

    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
    const injector = new PortalInjector(userInjector || this._injector, new WeakMap([
      [MatSnackBarConfig, config]
    ]));

    const containerPortal =
        new ComponentPortal(MatSnackBarContainer, config.viewContainerRef, injector);
    const containerRef: ComponentRef = overlayRef.attach(containerPortal);
    containerRef.instance.snackBarConfig = config;
    return containerRef.instance;
  }

private _attachKeyboardContent(config: MatKeyboardConfig): MatKeyboardRef {
    const overlayRef = this._createOverlay();
    const container = this._attachKeyboardContainer(overlayRef, config);
    const portal = new ComponentPortal(MatKeyboardComponent);
    const contentRef = container.attachComponentPortal(portal);
    return new MatKeyboardRef(contentRef.instance, container, overlayRef) as MatKeyboardRef;
  }

'radio-button': { 'radio-button-showcase': new ComponentPortal(RadioButtonShowcaseComponent) },
    'radio-button-panel': {
      'radio-button-panel-showcase': new ComponentPortal(RadioButtonPanelShowcaseComponent)
    },
    search: { 'search-showcase': new ComponentPortal(SearchShowcaseComponent) },
    select: { 'select-showcase': new ComponentPortal(SelectShowcaseComponent) },
    tag: { 'tag-showcase': new ComponentPortal(TagShowcaseComponent) },
    textarea: { 'textarea-showcase': new ComponentPortal(TextareaShowcaseComponent) },
    'time-input': { 'time-input-showcase': new ComponentPortal(TimeInputShowcaseComponent) },
    toggle: { 'toggle-showcase': new ComponentPortal(ToggleShowcaseComponent) },
    accordion: { 'accordion-showcase': new ComponentPortal(AccordionShowcaseComponent) },
    breadcrumb: { 'breadcrumb-showcase': new ComponentPortal(BreadcrumbShowcaseComponent) },
    ghettobox: { 'ghettobox-showcase': new ComponentPortal(GhettoboxShowcaseComponent) },
    notification: { 'notification-showcase': new ComponentPortal(NotificationShowcaseComponent) },
    pagination: { 'pagination-showcase': new ComponentPortal(PaginationShowcaseComponent) },
    processflow: { 'processflow-showcase': new ComponentPortal(ProcessflowShowcaseComponent) },
    table: { 'table-showcase': new ComponentPortal(TableShowcaseComponent) },
    tabs: { 'tabs-showcase': new ComponentPortal(TabsShowcaseComponent) },
    textexpand: { 'textexpand-showcase': new ComponentPortal(TextexpandShowcaseComponent) },
    usermenu: { 'usermenu-showcase': new ComponentPortal(UsermenuShowcaseComponent) },
    badge: { 'badge-showcase': new ComponentPortal(BadgeShowcaseComponent) },
    button: { 'button-showcase': new ComponentPortal(ButtonShowcaseComponent) },
    links: { 'links-showcase': new ComponentPortal(LinksShowcaseComponent) },
    loading: { 'loading-showcase': new ComponentPortal(LoadingShowcaseComponent) },
    dropdown: { 'dropdown-showcase': new ComponentPortal(DropdownShowcaseComponent) },
    lightbox: { 'lightbox-showcase': new ComponentPortal(LightboxShowcaseComponent) },
    tooltip: { 'tooltip-showcase': new ComponentPortal(TooltipShowcaseComponent) }
  };

  resolveExample(
    component: string
  ): { [name: string]: ComponentPortal } {

open(
    config: CalendarOverlayConfig = {},
    hostElemRef: ElementRef
  ): OverlayRef {
    this.hostElemRef = hostElemRef;
    const overlayConfig = { ...DEFAULT_CONFIG, ...config };
    const overlayRef = this.createOverlay(overlayConfig);
    const portalInjector = this.createInjector(overlayRef);
    const calendarPortal = new ComponentPortal(
      PickerOverlayComponent,
      null,
      portalInjector
    );
    overlayRef.attach(calendarPortal);

    overlayRef
      .backdropClick()
      .pipe(takeWhile(() => overlayConfig.shouldCloseOnBackdropClick))
      .subscribe(() => overlayRef.dispose());

    return overlayRef;
  }