I'm new to Angular and trying to add d3-context-menu in my Angular project. I successfully added Context Menu when user do right-click.
this.svg = d3.select(this.elementRef.nativeElement)
.append('div')
//.on('click', (d, this) => this.onClickTask(d3.event,taskData, this))
.on('contextmenu', contextMenu(this.menuItems, {
onOpen: () => {
// const status = this.MycomponentVariable; // issue here to get "this" of my component
console.log('Menu has been OPENED.');
},
onClose: () => {
// const status = this.MycomponentVariable; // issue here to get "this" of my component
console.log('Menu has been closed.');
}
}));
But the problem I facing that I want a variable (this.MycomponentVariable) value of my angular component via this(component context) when contxt-menu is opened or closed. But it shows that this is undefined. So, I'm unable to get value of this.MycomponentVariable.
I read documentation of d3-context-menu over this-link but couldn't get any solution.
Can anyone help me out that how can I get my angular component context inside onOpen and onClose methods?
Really use d3 (or jQuery) is not a great idea, but I imagine you can always create and dispach a CustomEvent.
this.svg = d3.select(this.elementRef.nativeElement)
.append('div')
.on('contextmenu', contextMenu(this.menuItems, {
onOpen: () => {
document.dispatchEvent(new CustomEvent('menu',{detail:'Open'}}));
},
onClose: () => {
document.dispatchEvent(new CustomEvent('menu',{detail:'Close'}}));
}
}));
And use rxjs fromEvent operator
ngOnInit() {
this.menuObs=fromEvent(document,'menu').subscribe((res:any)=>{
console.log(res.detail)
})
ngOnDestroy(){
this.menuObs.unsubscribe()
}