You'll need to use navigate method of the router you're using angular.io/.../router

I prepared a sample to demonstrate what I'm saying - https://stackblitz.com/edit/angular-nq8kqr-wsehqg

Please review it and let me know if you have further questions.

https://stackblitz.com/edit/angular-nq8kqr-wsehqg?file=src%2Fapp%2Fapp.component.ts

Please note the column definition:

    columns: [

      { key: "name", template: "<button onclick='angularComponentRef.componentFn(\"${name}\")'>${name}</button>" }

    ]

Please note ‘angularComponentRef’ is a globally defined object so that it can be accessed in the template and the componentFn that is defined inside it calls the router navigate method:

 
constructor(private router: Router, private zone:NgZone) {
        window['angularComponentRef'] = {
            zone: this.zone,
            componentFn: (value) => this.navigate(value), 
            component: this
        };
  }
 
  navigate(val) {
    this.router.navigate([val]);
  }
}

Please refer to the sample again.

Let me know if you encounter any issues when implementing this approach in your own code or if you have any additional questions or concerns.

Regards,

Maya Kirova