Angular Portal not triggering change detection for ComponentPortal

Question

I am relatively new to angular and have a feature where I need to popout a component in a separate child window and on the window close I need to attach it again to the parent window

I have read about angular portal and decided to use it. I have written the following service to manage the portal and it's creation:

import { ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable, Injector, InjectionToken, Inject } from '@angular/core';
import { PopoutComponent } from '../popout/popout.component';
import { POPOUT_REFS } from './portal.token';
import { EventService } from './event.service';

@Injectable({
  providedIn: 'root'
})
export class PortalService {

  constructor(private injector: Injector,
    private componentFactoryResolver: ComponentFactoryResolver,
    private applicationRef: ApplicationRef,
    private eventService: EventService ) {
      this.eventService.popoutEvent$.subscribe((val) => {
        if(val && this.isPopoutWindowOpen()) {
          this.closePopoutWindow();
        }
      })
    }

  popOutComponent() {
    const popoutWindow: Window = this.createWindow('POP_OUT_COMPONENT');
    setTimeout(() => {
      this.createPortal(popoutWindow);
    }, 1000);

  }

  private createWindow(target): Window {
    const ref = window.open("index.html", "_blank", "height=400; width=400;directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=no;", true);
    setTimeout(() => {
      ref.document.body.innerHTML = "";
    }, 1000);
    return ref;
  }

  private createPortal(popoutWindow: Window) {
    if(popoutWindow) {
      const outlet = new DomPortalOutlet(popoutWindow.document.body, this.componentFactoryResolver, this.applicationRef, this.injector);
      const conatinerInstance = this.attachPopoutContainer(outlet);
      this.attachUnloadEventToPopoutWindow(popoutWindow);

      POPOUT_REFS['windowInstance'] = popoutWindow;
      POPOUT_REFS['containerInstance'] = conatinerInstance;
      POPOUT_REFS['portalOutlet'] = outlet;
    }
  }

  private attachPopoutContainer(outlet: DomPortalOutlet) {
    const containerPortal = new ComponentPortal(PopoutComponent, null, null);
    const containerRef: ComponentRef<PopoutComponent> = outlet.attach(containerPortal);
    return containerRef.instance;
  }

  private attachUnloadEventToPopoutWindow(popoutWindow: Window) {
    popoutWindow.addEventListener("beforeunload", () => {
      POPOUT_REFS['portalOutlet'].detach();
      this.eventService.publishPopoutEvent(true);
    });
  }

  isPopoutWindowOpen() {
    return POPOUT_REFS['windowInstance'] && !POPOUT_REFS['windowInstance'].closed;
  }

  closePopoutWindow() {
    Object.keys(POPOUT_REFS).forEach(popout => {
      if(POPOUT_REFS['windowInstance']) {
        POPOUT_REFS['windowInstance'].close();
      }
    });
  }

  focusPopoutWindow() {
    POPOUT_REFS['windowInstance'].focus();
  }

}

When I am clicking a button say detach in the component I want to render in the child window it removes the component in main window since it is being rendered based on ngIf . The component works fine in the new child component. When I close the child window and based on the condition again the component is rendered back, but even on change of properties, angular change detection is not triggered. I have to manually trigger change detection to make it work. Here is my MainComponent where I need to do manual triggers for change detection to reflect changes in the detached component:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { EventService } from '../service/event.service';
import { PortalService } from '../service/portal.service';
import { ChangeDetectionStrategy } from '@angular/compiler/src/compiler_facade_interface';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  isAttached: boolean;
  num: number;

  constructor(
    private eventService: EventService,
    private portalService: PortalService,
    private changeDetectorRef: ChangeDetectorRef
    ) {
    this.isAttached = true;
  }

  ngOnInit() {
    const popoutComponent = this.handlePopoutComponent.bind(this);
    this.eventService.numberEvent$.subscribe(val => {
      this.num = val;
    });
    this.eventService.popoutEvent$.subscribe(val => {
      if (val != null) {
        popoutComponent(val);
      }
    });
  }

  handlePopoutComponent(val: boolean) {
    this.isAttached = val;
    this.changeDetectorRef.detectChanges();
    if (this.isAttached === false && !this.portalService.isPopoutWindowOpen()) {
      this.portalService.popOutComponent();
    }
  }

  onNumberPublish() {
    this.num += 1;
    this.eventService.publishNumberEvent(this.num);
  }
}

Is there a correct way to do this? I am guessing the window close event does not cleanly dispose and reattach the component to main window.

Answer 1

It might be worth considering a light eventbus for this scenario ..

export class EventBusService implements OnDestroy{

  private eventBus : Subject<App.Event>= new Subject();
  public eventBus$ : Observable<App.Event> = this.eventBus.asObservable();

  constructor() { }

  fire(event : App.Event){
    this.eventBus.next(event);
  }  

  ngOnDestroy(){
    this.eventBus.unsubscribe();
  }

}

You can fire events from your main as well as the pop-up component and handle them accordingly.