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.
The following did the trick: