template modals

custom.overlay.config.ts

interface CustomOverlayConfig {
 hasBackdropClick?: boolean;
 isCentered?: boolean;
 size?: any;
 top?: string;
}

const DEFAULT_CUSTOM_CONFIG: CustomOverlayConfig = {
 hasBackdropClick: false,
 isCentered: true,
 size: null
};

@Injectable()
export class TemplateModalService {
 public dialogRef: TemplateModalOverlayRef;
 public customConfig: CustomOverlayConfig;
 constructor(
   private injector: Injector,
   private overlay: Overlay
 ) { }

open(templateRef: CdkPortal, config: FormModalConfig = {}, customConfig: CustomOverlayConfig = {}) {...}

my-page.component-dialogref.ts

public dialogRef: TemplateModalOverlayRef;

my-page.component-viewchild.ts

@ViewChild('ratingModal') ratingModal: TemplatePortal<any>;

my-page.component.close-modal.ts

public closeModal() {
   this.dialogRef.close();
   this.modalData.next({});
}

my-page.component.html

<ng-template cdkPortal #ratingModal="cdkPortal">
 <rating-modal [modalData]="modalData | async" (close)="closeModal()" (ratings)="updateRating($event)" (rate)="rateEvent($event)"></rating-modal>
</ng-template>

my-page.component.open-modal.ts

this.dialogRef = this.modalService.open(this.ratingModal, {}, {
   isCentered: false
});

template.modal.ref.ts

import { OverlayRef } from '@angular/cdk/overlay';
export class TemplateModalOverlayRef {
 constructor(private overlayRef: OverlayRef) { }
 close(): void {
   this.overlayRef.dispose();
 }
}

template.modal.service.ts

private attachModalContainer(
   overlayRef: OverlayRef,
   config: FormModalConfig,
   dialogRef: TemplateModalOverlayRef,
   templateRef: CdkPortal // this was added
 ) {
   const containerRef = overlayRef.attach(templateRef); // this was changed
   return containerRef;
 }

template.modal.service2.ts

private getOverlayConfig(config: FormModalConfig): OverlayConfig {
   let positionStrategy = this.overlay.position()
     .global();

   if (this.customConfig.isCentered) {
     positionStrategy = positionStrategy
       .centerHorizontally()
       .centerVertically();
   }
   if (this.customConfig.size) {
     positionStrategy = positionStrategy
       .width(this.customConfig.size.width)
       .height(this.customConfig.size.height);
   }

   if (this.customConfig.top) {
     positionStrategy = positionStrategy
       .top(this.customConfig.top)
       .centerHorizontally();
   }

I'm also getting error 'there is no directive with exportAs set to cdkPortal'. I've made all of the adjustments, and I'm importing PortalModule. Was this every resolved?

I'm also getting error 'there is no directive with exportAs set to cdkPortal'. I've made all of the adjustments, and I'm importing PortalModule. Was this every resolved?

Gotta love it - a minute after I submit this, I found my error. I was not, in fact, importing Portal Module in the correct dependent component module.

Anyway, thanks for the great tutorial!