Angular router navigation from cell custom renderer

Tags: #<Tag:0x00007f8b2b13e3a0>
#1

Hello, I’m using handsontable@9.x inside my Angular project. With a custom renderer I want to trigger an angular router navigation but the router reference is undefined inside the afterOnCellMouseDown function. Is handsontable misconfigured or I’m trying to use an unsupported feature?
Here is what I have:

  • in template… <hot-table … [afterOnCellMouseDown]=“handleMouseDown”>…
  • in component ngOnInit Handsontable.renderers.registerRenderer(‘browsebutton’, this.browseButtonRenderer);
  • in component body
    private browseButtonRenderer(hotInstance: any, td: any, row: any, column: any, prop: any, value: any, cellProperties: any): any {
    let btn = null;
    btn = document.createElement(‘BUTTON’);
    btn.textContent = ‘GO’;
    btn.setAttribute(‘value’, value);
    td.innerText = ‘’;
    td.appendChild(btn);
    return td;
    }
    public handleMouseDown(event: any): void {
    const target = event.target as HTMLInputElement;
    if (target.nodeName.toLowerCase() === ‘button’) {
    this.router.navigate([‘other’,‘route’,target.value]); // this.router is UNDEFINED!
    }
    }
    Thanks for your help
#2

Hi @ziogiugno

Would it be possible to you to prepare a code demo showing the issue? I tried to recreated it but it looks like some parts of the code are missing here. That would be really helpful.

#3

I will try but I found where is the problem, inside the Angular component where the afterOnCellMouseDown hook function is implemented the ‘this’ reference doesn’t link the Angular component itself but the Handsontable instance where there are no references to all the world of Angular components. I found on the internet a workaround for Handsontable->Angular communication

#4

I will usually have the link call a function in my type script file. From there I will navigate using the router.

Just make sure to wrap the router code inside an NGZone .run function

#5