Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
component portal modals
this.isSuccessSub = this.isSuccess$.subscribe((isSuccess) => {
if (isSuccess) {
open<T>(component: ComponentType<T>, config: FormModalConfig = {}) {
// Returns an OverlayRef (which is a PortalHost)
const modalConfig = { ...DEFAULT_CONFIG, ...config };
const overlayRef = this.createOverlay(modalConfig);
const dialogRef = new FormModalOverlayRef(overlayRef);
const overlayComponent = this.attachModalContainer<T>(overlayRef, modalConfig, dialogRef, component);
this.dialogRef = dialogRef;
return dialogRef;
private attachModalContainer<T>(
overlayRef: OverlayRef,
config: FormModalConfig,
dialogRef: FormModalOverlayRef,
component: ComponentType<T>
) {
const injector = this.createInjector(config, dialogRef);
const containerPortal = new ComponentPortal(component, null, injector);
const containerRef: ComponentRef<T> = overlayRef.attach(containerPortal);
return containerRef.instance;
private attachModalContainer(
overlayRef: OverlayRef,
config: ConfirmationModalConfig,
dialogRef: ConfirmationModalOverlayRef
) {
const injector = this.createInjector(config, dialogRef);
const containerPortal = new ComponentPortal(ConfirmationComponent, null, injector);
const containerRef: ComponentRef<ConfirmationComponent> = overlayRef.attach(containerPortal);
return containerRef.instance;
this.dialogRef: FormModalOverlayRef =<EditProfileComponent>(EditProfileComponent);

This comment has been minimized.

Copy link

AsafAgranat commented Mar 20, 2019

Hi Zlati,
I was reading your article, and I'm quite eager to implement your 1st solution in my own app, since I previously implemented the ThoughtTram tutorial, but I wasn't happy about coupling the overlay service with the dialog component.
Now i'm having some difficulty following your lead (mostly because I don't have a working demo to copy from ;p). Right on the beginning, when I try to use ComponentType<T>, I get the following TS error "Cannot find name 'T'" (imported from @angular/cdk/portal). Do you know what's it about perhaps?

Or is it me being a noob, and it should be ComponentType<any>?

EDIT: I'm only stuck now with the overlayRef. in the ThoughtTram gukde the overlayRef is importing the dialog component directly as a component instance. How did you pass the component instance instead of importing?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.