Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
template modals
interface CustomOverlayConfig {
hasBackdropClick?: boolean;
isCentered?: boolean;
size?: any;
top?: string;
const DEFAULT_CUSTOM_CONFIG: CustomOverlayConfig = {
hasBackdropClick: false,
isCentered: true,
size: null
export class TemplateModalService {
public dialogRef: TemplateModalOverlayRef;
public customConfig: CustomOverlayConfig;
private injector: Injector,
private overlay: Overlay
) { }
open(templateRef: CdkPortal, config: FormModalConfig = {}, customConfig: CustomOverlayConfig = {}) {...}
public dialogRef: TemplateModalOverlayRef;
@ViewChild('ratingModal') ratingModal: TemplatePortal<any>;
public closeModal() {
<ng-template cdkPortal #ratingModal="cdkPortal">
<rating-modal [modalData]="modalData | async" (close)="closeModal()" (ratings)="updateRating($event)" (rate)="rateEvent($event)"></rating-modal>
this.dialogRef =, {}, {
isCentered: false
import { OverlayRef } from '@angular/cdk/overlay';
export class TemplateModalOverlayRef {
constructor(private overlayRef: OverlayRef) { }
close(): void {
private attachModalContainer(
overlayRef: OverlayRef,
config: FormModalConfig,
dialogRef: TemplateModalOverlayRef,
templateRef: CdkPortal // this was added
) {
const injector = this.createInjector(config, dialogRef);
const containerRef = overlayRef.attach(templateRef); // this was changed
return containerRef;
private getOverlayConfig(config: FormModalConfig): OverlayConfig {
let positionStrategy = this.overlay.position()
if (this.customConfig.isCentered) {
positionStrategy = positionStrategy
if (this.customConfig.size) {
positionStrategy = positionStrategy
if ( {
positionStrategy = positionStrategy

This comment has been minimized.

Copy link

capaneus commented Jan 18, 2019

hi Zlati,
Thanks for you artical introducing 3 ways to create a Modal Window. It's really brilliant. My personal preference is the 3rd solution, I'm trying to follow the artical but blocked.
in template.modal.service.ts -> attachModalContainer function, the injector wasn't used, so there is no place to connect the TemplateModalOverlayRef with templateRef: CdkPortalm, in previous solution when using ComponentPortal, this link was bridged through injector
So when I tried the 3rd method, at first it failed at
It complains there is no directive with "exportAs" set to "cdkPortal"
then I removed ="cdkPortal"
it complains: Attempting to attach an unknown Portal type. BasePortalOutlet accepts either a ComponentPortal or a TemplatePortal
at here: const containerRef = overlayRef.attach(templateRef);

Is there anything missing in the sample?



This comment has been minimized.

Copy link

jeremyputeaux commented Feb 17, 2019

Actually, in step 3 you can remove all lines related to injector.
Also you probably forgot to import PortalModule.

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.