Listen for events from PhotoEditorSDK in Angular

Question

I have an app where I want to use the PhotoEditorSDK component. Their demos for angular implementation states that they want me to set this up using

@Component({
  selector: 'app-photo-editor',
  template: `<ngui-react [reactComponent]="reactComponent" [reactProps]="reactProps"></ngui-react>`,
  styleUrls: ['./photo-editor.component.scss']
})
export class PhotoEditorComponent implements OnInit {
  @Input() src: string;
  image = new Image();

  defaultProps = {
    license: license,
    assets: {
      baseUrl: '/assets/photoeditorsdk' // see angular-cli.json for configuraton
    },
    responsive: true,
    style:{
      width: '100%',
      height: '100%'
    },
    editor: {
      image: this.image
    }
  };

  reactComponent: React.Component = PhotoEditorDesktopUI.ReactComponent;
  reactProps: any = {...this.defaultProps};

  constructor(private el: ElementRef, private translate: TranslateService) { }

  ngOnInit() {
    this.image.src = this.src;
  }
}

This works fine. I get the rendered React component in my Angular app. Now I want to register an event listener on the rendered object. Their documentation state that they expose at least an export event:

editor.on('export', (result) => {
  console.log('User clicked export, resulting image / dataurl:', result)
})

But I do not create the editor myself. This object is created by transmitting the component type to ngui-react, and created within this directive. How do I get a hold of the created PhotoEditorSDK object, so I can place event listeners on it?

I've tried setting the event listener on

this.reactComponent.on(....)

But PhotoEditorDesktopUI !== this.reactComponent. The reactComponent is a container for the created PhotoEditorDesktopUI object.

Answer 1

The following did the trick:

import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef, Input, Inject, EventEmitter, Output } from '@angular/core';
import PhotoEditorDesktopUI from 'photoeditorsdk/js/PhotoEditorSDK.UI.DesktopUI';

// !! IMPORTANT !!
import * as React from 'react'
import * as ReactDom from 'react-dom'


declare global {
  interface Window { React: any; ReactDom: any; }
}
window.React = window.React || React
window.ReactDom = window.ReactDom || ReactDom
// /END !! IMPORTANT !!

@Component({
  selector: 'app-photo-editor',
  template: '',
  styles: [':host { display: flex; width: 100%; min-height: 30rem; }']
})
export class PhotoEditorComponent implements OnInit {
  @Input() src: string;
  @Output() srcChange = new EventEmitter<string>();
  image = new Image();
  editor;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.image.src = this.src;
    this.editor = new PhotoEditorDesktopUI({
      container: this.el.nativeElement,
      license: license,
      assets: {
        baseUrl: '/assets/photoeditorsdk' // see angular-cli.json for configuraton
      },
      responsive: true,
      style: {
        width: '100%',
        height: '100%'
      },
      editor: {
        image: this.image,
        export: {
          download: false
        }
      },
    });
    this.editor.on('export', (result) => this.srcChange.emit(result));
  }
}