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 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?


This comment has been minimized.

Copy link
Owner Author

@talamaska talamaska commented Jul 23, 2020
Here is the full working code. Take a look. I pass the component as an argument and as a type

const dialogRef: FormModalOverlayRef =<FormModalComponent>(FormModalComponent);
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.