AG-Grid Button Does Not Navigate to the Page

Question

In my app, I am using AG-Grid to display a list. One of the columns of this list is the detail column. Inside it, there is a button that is supposed to navigate to the detail of that row. But I get the error below when I click the button and can not navigate to the detail of the row. My code is below, what should I do to make the button work?

List TS:

constructor(
    private _router: Router,
  ) {}
  getTicketList() {
    // this.rowData = this._adminService.getTicketList(this.Filter);

    this._adminService
      .getTicketList(this.Filter)
      .subscribe((response: any) => {
        this.rowData = response;
      });
  }

  rowData: Observable<ITicket[]>;
        {
          headerName: 'Detay', field: 'TicketId', cellRenderer: BtnCellRenderer,
          cellRendererParams: {
            clicked: function (field: any) {
              this._router.navigateByUrl("/admin/ticket-detail/" + this.data.TicketId);
            }
          },
        },

BtnCellRenderer TS:

@Component({
    selector: "btn-cell-renderer",
    template: `<button mat-icon-button matTooltip="Detay" (click)="btnClickedHandler($event)">
  <mat-icon> open_in_browser</mat-icon>
  </button>`
})
export class BtnCellRenderer implements ICellRendererAngularComp, OnDestroy {

    refresh(params: ICellRendererParams): boolean {
        throw new Error("Method not implemented.");
    }
    private params: any;

    agInit(params: any): void {
        this.params = params;
    }

    btnClickedHandler() {
        this.params.clicked(this.params.value);
    }
}

Answer 1

Can you try

clicked: function (field: any) {
  this._router.navigateByUrl("/admin/ticket-detail/" + this.data.TicketId);
}.bind(this)