Template Strings in Angular: How to bind a function?

Question

I wonder if it is possible to bind a function to a html Template via the template-string notation.

So if i do this

 let dynTamp = `<div> ${device.name} </div>`;

it works perfectly well, but this

let dynTamp = `<button (click)="${someFunction}"></button>`;

does not bind the function to the click event. Am I missing something here?

The Background: I am working with LeafletJs and dynamically create markers on a map, whose popovers should contain buttons:

this.devices.forEach(device => {

        L.marker([Number(device.map_x), Number(device.map_y)], {icon: this.icon})
          .bindPopup(`<h2> ${device.name}</h2>
                  <button (click)="${doThis}"></button>
                  <button (click)="${doThat}"></button>`)
          .addTo(this.map)           
    }

Answer 1

This should be the correct syntax :

let dynTamp = `<button (click)="someFunction()"></button>`;

I share an example of how to use a template string : View Example

Answer 2

please replace with this

let dynTamp = `<button (click)="someFunction()"></button>`;

instead of

let dynTamp = `<button (click)="${someFunction}"></button>`;

An angular expression is not a template string. It's an Angular expression. The syntax to call someFunction() when a button is clicked is (click)="someFunction() ".