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

Array.prototype.slice.call(exampleElements).forEach((element: Element) => {
            const example = element.getAttribute(componentName);
            const portalHost = new DomPortalOutlet(
                element, this._componentFactoryResolver, this._appRef, this._injector);
            const examplePortal = new ComponentPortal(componentClass, this._viewContainerRef);
            const exampleViewer = portalHost.attach(examplePortal);
            (exampleViewer.instance as ExampleViewer).example = example;

            this.portalHosts.push(portalHost);
        });
    }

private attachViewItemComponent(pane: HTMLElement, ref: VcsItemRef): void {
        const portal = new DomPortalOutlet(pane, this.componentFactoryResolver, this.appRef, this.injector);
        const injector = this.createInjector(ref);
        const componentRef = portal.attachComponentPortal(
            new ComponentPortal(ref.component, this._viewContainerRef || undefined, injector),
        );

        ref.panePortal = portal;
        ref.paneElementId = pane.id;
        ref.componentInstance = componentRef.instance;
    }

private get bodyPortalHost() {
    if (!this._portalHostElement) {
      const hostElement = this._portalHostElement = document.createElement('div');
      hostElement.classList.add('op-external-query-configuration--container');
      document.body.appendChild(hostElement);

      this._bodyPortalHost = new DomPortalOutlet(
        hostElement,
        this.componentFactoryResolver,
        this.appRef,
        this.injector
      );
    }

    return this._bodyPortalHost;
  }

createOverlayMenu() {
        this.menuElement = this.render2.createElement('div');
        this.menuElement.classList.add('overlay-menu');
        this.menuElement.innerHTML = '<span>Angular Material</span>';
        this.bodyElement.appendChild(this.menuElement);
        this.domPortalOutlet = new DomPortalOutlet(this.menuElement, this.componentFactoryResolver, this.appRef, this.injector);
    }

private createPortalOutlet(element: HTMLElement): DomPortalOutlet {
        return new DomPortalOutlet(element, this._componentFactoryResolver, this._appRef, this._injector);
    }

private attachSnippetEditorComponent(
        pane: HTMLElement,
        snippet: NoteSnippetContent,
    ): NoteSnippetEditorRef {
        const config = this.makeConfigFromSnippet(snippet);
        const ref = new NoteSnippetEditorRef(config);
        const portal = new DomPortalOutlet(pane, this.componentFactoryResolver, this.appRef, this.injector);

        let component: ComponentType;

        switch (snippet.type) {
            case NoteSnippetTypes.TEXT:
                component = NoteTextSnippetEditorComponent;
                break;
            case NoteSnippetTypes.CODE:
                component = NoteCodeSnippetEditorComponent;
                break;
            default:
                throw new Error(`Cannot find snippet type: ${snippet.type}`);
        }

        const injector = this.createInjector(config, ref);
        const snippetEditorRef = portal.attachComponentPortal(

private attachComponent(
        plantComponent: PlanetComponent,
        appModuleRef: NgModuleRef,
        config: PlantComponentConfig
    ): PlanetComponentRef {
        const plantComponentRef = new PlanetComponentRef();
        const componentFactoryResolver = appModuleRef.componentFactoryResolver;
        const appRef = this.applicationRef;
        const injector = this.createInjector(appModuleRef, plantComponentRef);
        const container = this.getContainerElement(config);
        let portalOutlet = this.domPortalOutletCache.get(container);
        if (portalOutlet) {
            portalOutlet.detach();
        } else {
            portalOutlet = new DomPortalOutlet(container, componentFactoryResolver, appRef, injector);
            this.domPortalOutletCache.set(container, portalOutlet);
        }
        const componentPortal = new ComponentPortal(plantComponent.component, null);
        const componentRef = portalOutlet.attachComponentPortal(componentPortal);
        if (config.initialState) {
            Object.assign(componentRef.instance, config.initialState);
        }
        plantComponentRef.container = container;
        plantComponentRef.componentInstance = componentRef.instance;
        plantComponentRef.componentRef = componentRef;
        plantComponentRef.dispose = () => {
            this.domPortalOutletCache.delete(container);
            portalOutlet.dispose();
        };
        return plantComponentRef;
    }

_createPortalOutlet(pane) {
        return new DomPortalOutlet(pane, this._componentFactoryResolver, this._appRef, this._injector);
    }
}

constructor(
    private cfr: ComponentFactoryResolver,
    private ar: ApplicationRef,
    private injector: Injector
  ) {
    this._overlayElement = document.createElement('div');
    this._overlayElement.classList.add('daff-overlay-container'); 
    this._portalOutlet = new DomPortalOutlet(
      this._overlayElement,
      this.cfr,
      this.ar,
      this.injector
    );
    this._backdropPortal = new ComponentPortal(DaffBackdropComponent);
    this._modalPortal = new ComponentPortal(DaffModalComponent);
  }

private createDomOutlet(hostElement:HTMLElement, injector:Injector) {
    return new DomPortalOutlet(
      hostElement,
      this.componentFactoryResolver,
      this.appRef,
      injector
    );
  }
}