ag-grid routerlink within row-data causes template to break

user_2485467 0
Viewed 2122

Hi I'm having a issue with a navigation button within a ag-grid table. When routing the user to a different component the display breaks. see below screen shot: This display is incorrect

Now if I click anywhere on the page it displays correctly (This is the incorrect functionality. I expect to be displayed with the correct template on-landing of the component). see below screen shot: This is the correct display I have a grid.component where all configurations of the grid take place and I implement a cellRendererFramework to incorporate a button for editing a row of the grid. This is my implementation of the edit button component:

  this.columns.push({
    headerName: '#',
    cellRendererFramework: ActionButtonRendererComponent,
    field: '_actions',
    width: 300,
  });
  this.gridOptions.columnDefs = this.columns;

Within this simple ActionButtonRendererComponent I have a template displaying a simple hyperlink with the relevant and correct route

<a class="btn btn-primary btn-sm mr-2 mb-2" routerLink="/to/my/route" type="button"><i aria-hidden="true" class="fa fa-edit"></i></a>

The end result is my grid looking like this: Grid View Now if I click the blue edit button this unexpected behavior happens (as I described above and with the relevant screen shots). The strange thing is that if I create a hyperlink outside of the grid rows, that implement the same route /to/my/route it works perfectly and loads the relevant components template correctly with no need for a extra click.

This behavior is so weird and cannot get my head around it. Any help would be greatly appreciated.

angular2-routing ag-grid angular
2 Answers

Found bit hacky soulution. You should "sync" runtime with NGZOne.

this.ngZone.run(() => {
  this.router.navigate([url, paramValue]);
});
user_88562760

It is actually working via params.value. In ActionButtonRenderComponent.ts 

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
    template: `
        <span class="spn-style">
            <i
                class="fal fa-cube fa-std color_add"
                routerLink="/home/projects/{{ params.value }}/mt-entry"
            ></i>
        </span>
    `,
    styleUrls: ['./action-button-renderer-column.component.scss'],
})
export class ActionButtonRenderComponent
    implements ICellRendererAngularComp {
    public params: any;  //this is the imp bit

    agInit(params: any): void {
        this.params = params;  // console log it 
    }



    refresh(): boolean {
        return false;
    }
}

In the above code on the router link I have used the {{params.value}} which is working without any changes.

Note: The routing should be valid if you misspell it or invalid route ending up with broken pages

user_66390200
Related