How to load an angular component dynamically on canvas shape click?

Question

In angular, I am trying to load a component dynamically but I am not able to do it. I have shape which I am creating using create Js, now what I want to do is to load a component when this shape gets clicked.This shape is drawn on canvas tag of html. But it's throwing me an error Cannot read property 'componentFactoryResolver' of undefined

App.component.html

 <div #parent> </div>

App.component.ts

@ViewChild('parent', { static: true, read: ViewContainerRef }) target: ViewContainerRef;
private componentRef: ComponentRef<any>;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
let square = new createjs.Shape();
square.graphics.beginFill(color).drawRect(dot.x, dot.y, 100, 100);

 //ClICK LISTENER. HERE I WANT TO LOAD A COMPONENT BUT THROWING ME A Cannot read property 'componentFactoryResolver' of undefined
square.addEventListener("click", function (event) {
//DYN
let childComponent = this.componentFactoryResolver.resolveComponentFactory(dynamicComponent);
this.componentRef = this.target.createComponent(childComponent);
this.addElement();})

I am kinda stuck for a long time and not able to do it anything. Any help would be appreciated. Thank you so much

Answer 1

just change this:

function (event) {

to this:

(event) => {

arrow functions keep the outter this context while regular functions create a new one.

be careful though, looks like you're creating a pretty severe memory leak.