Last active
July 23, 2020 13:01
-
-
Save talamaska/cd6df3dc64134a3d5d84ce0221293aa1 to your computer and use it in GitHub Desktop.
component portal modals
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.isSuccessSub = this.isSuccess$.subscribe((isSuccess) => { | |
if (isSuccess) { | |
this.dialogRef.close(); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.dialogRef: FormModalOverlayRef = this.modal.open<EditProfileComponent>(EditProfileComponent); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://stackblitz.com/edit/angular-cdk-modals
Here is the full working code. Take a look. I pass the component as an argument and as a type