Hi,
I am using CDK portal to create a new window that hosts the component which uses JQWidgets like(grid, splitter etc). When I attach my component DomPortalHost to the window, I am able to see all of the html code except the widgets code. Below is my cdkportal code
import {Component, ViewChild, OnInit, ComponentFactoryResolver, ApplicationRef, Injector, OnDestroy, AfterViewInit } from ‘@angular/core’;
import {CdkPortal,DomPortalHost} from ‘@angular/cdk/portal’;
/**
* This component template wrap the projected content
* with a ‘cdkPortal’.
*/
@Component({
selector: ‘portal’,
template: `
<ng-container *cdkPortal>
<ng-content></ng-content>
</ng-container>
`
})
export class WindowComponent implements OnInit, AfterViewInit, OnDestroy {
// STEP 1: get a reference to the portal
@ViewChild(CdkPortal, {static: false}) portal: CdkPortal;
// STEP 2: save a reference to the window so we can close it
private externalWindow = null;
// STEP 3: Inject all the required dependencies for a PortalHost
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private applicationRef: ApplicationRef,
private injector: Injector) {}
ngOnInit(){
}
ngAfterViewInit() {
// STEP 4: create an external window
this.externalWindow = window.open(”, ”, ‘width=600,height=400,left=200,top=200’);
// STEP 5: create a PortalHost with the body of the new window document
const host = new DomPortalHost(
this.externalWindow.document.body,
this.componentFactoryResolver,
this.applicationRef,
this.injector
);
// STEP 6: Attach the portal
host.attach(this.portal);
}
ngOnDestroy(){
// STEP 7: close the window when this component destroyed
this.externalWindow.close();
}
}
I am attaching my component like this,
<portal ngIf=”showPortal”><app-test></app-test</portal>
Please let me know.
