Fix dialog typings and allow access to dialog content reference

safing · Mar 30, 2022 · b09117b · b09117b
1 parent 426523c
commit b09117b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/modules/portmaster/src/app/shared/dialog/dialog.container.ts b/modules/portmaster/src/app/shared/dialog/dialog.container.ts
@@ -1,6 +1,7 @@
 import { AnimationEvent } from '@angular/animations';
-import { CdkPortalOutlet, ComponentPortal, Portal, TemplatePortal } from '@angular/cdk/portal';
-import { ChangeDetectorRef, Component, ComponentRef, EmbeddedViewRef, HostBinding, HostListener, InjectionToken, Input, ViewChild } from '@angular/core';
+import { CdkPortalOutlet, ComponentPortal, ComponentType, Portal, TemplatePortal } from '@angular/cdk/portal';
+import { NullTemplateVisitor } from '@angular/compiler';
+import { ChangeDetectorRef, Component, ComponentRef, EmbeddedViewRef, HostBinding, HostListener, InjectionToken, Input, Type, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
 import { dialogAnimation } from './dialog.animations';
 
@@ -18,9 +19,11 @@ export type DialogState = 'opening' | 'open' | 'closing' | 'closed';
   styleUrls: ['./dialog.scss'],
   animations: [dialogAnimation]
 })
-export class DialogContainer {
+export class DialogContainer<T> {
   onStateChange = new Subject<DialogState>();
 
+  ref: ComponentRef<T> | EmbeddedViewRef<T> | null = null;
+
   constructor(
     private cdr: ChangeDetectorRef
   ) { }
@@ -31,12 +34,14 @@ export class DialogContainer {
   @ViewChild(CdkPortalOutlet, { static: true })
   _portalOutlet: CdkPortalOutlet | null = null;
 
-  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
-    return this._portalOutlet!.attachComponentPortal(portal)
+  attachComponentPortal(portal: ComponentPortal<T>): ComponentRef<T> {
+    this.ref = this._portalOutlet!.attachComponentPortal(portal)
+    return this.ref;
   }
 
-  attachTemplatePortal<T>(portal: TemplatePortal<T>): EmbeddedViewRef<T> {
-    return this._portalOutlet!.attachTemplatePortal(portal);
+  attachTemplatePortal(portal: TemplatePortal<T>): EmbeddedViewRef<T> {
+    this.ref = this._portalOutlet!.attachTemplatePortal(portal);
+    return this.ref;
   }
 
   @Input()

diff --git a/modules/portmaster/src/app/shared/dialog/dialog.ref.ts b/modules/portmaster/src/app/shared/dialog/dialog.ref.ts
@@ -1,5 +1,5 @@
-import { OverlayRef } from "@angular/cdk/overlay";
-import { InjectionToken } from "@angular/core";
+import { ComponentType, OverlayRef } from "@angular/cdk/overlay";
+import { ComponentRef, EmbeddedViewRef, InjectionToken } from "@angular/core";
 import { Observable, PartialObserver, Subject } from "rxjs";
 import { filter, take } from "rxjs/operators";
 import { DialogContainer, DialogState } from "./dialog.container";
@@ -9,7 +9,7 @@ export const DIALOG_REF = new InjectionToken<DialogRef<any>>('DialogRef');
 export class DialogRef<T, R = any> {
   constructor(
     private _overlayRef: OverlayRef,
-    private container: DialogContainer,
+    private container: DialogContainer<T>,
   ) {
     this.container.onStateChange
       .pipe(
@@ -33,6 +33,10 @@ export class DialogRef<T, R = any> {
    */
   overlay() { return this._overlayRef }
 
+  /**
+   * @returns the instance attached to the dialog container
+   */
+  contentRef() { return this.container.ref! }
 
   /** Value holds the value passed on close() */
   private value: R | null = null;

diff --git a/modules/portmaster/src/app/shared/dialog/dialog.service.ts b/modules/portmaster/src/app/shared/dialog/dialog.service.ts
@@ -41,7 +41,7 @@ export class DialogService {
   }
 
   create<T>(template: TemplatePortal<T>, opts?: BaseDialogConfig): DialogRef<EmbeddedViewRef<T>>;
-  create<T>(target: ComponentType<T>, opts?: BaseDialogConfig & ComponentPortalConfig): DialogRef<ComponentRef<T>>;
+  create<T>(target: ComponentType<T>, opts?: BaseDialogConfig & ComponentPortalConfig): DialogRef<T>;
   create<T>(target: ComponentType<T> | TemplatePortal<T>, opts: BaseDialogConfig & ComponentPortalConfig = {}): DialogRef<any> {
     let position: PositionStrategy = opts?.positionStrategy || this.overlay
       .position()
@@ -69,7 +69,7 @@ export class DialogService {
 
     // create our dialog container and attach it to the
     // overlay.
-    const containerPortal = new ComponentPortal(
+    const containerPortal = new ComponentPortal<DialogContainer<T>>(
       DialogContainer,
       undefined,
       this.injector,