I am using Bootstrap Tables in an Angular app. To render custom buttons in a cell, I have to write the HTML code from the Angular Component, defining the HTML as a string. However in this way, I can’t bind component functions

This is the working solution I adopted in old AngularJS.

const formatButton = function(row_element, index)
{
 var html = `<button onClick="angular.element(this).scope().myFunction(${index})">
                Alert ${index} 
            </button>`;
}

function init(){
var table_columns:[
   {
    title:"Column 1",       // th name
    formatter: formatButton // render cells
   }];

jQuery("#table-id").bootstrapTable({
columns: table_columns,
data:data});
}

$scope.myFunction(index)
 { alert(index); }

this renders a table like this. clicking on buttons, will call $scope.myFunction() showing an alert with the row index

==============
|             |
|  Column 1   |
|             |
=============
|  Alert 1   |
--------------
|   Alert 2  |
_____________

In modern Angular, I don’t have $scope, so I really don’t know how to access to component function myFunction() from injected html, callable by simple onClick and not by (click)