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)           
    }

Yes. 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()". And Angular templates need to be compiled. You can't just dynamically generate HTML containing Angular markup and hope it works. It won't. — JB Nizet
– JB Nizet, Commented Aug 13, 2018 at 15:50
Well sure, we know that from AngularJS. In my first example though it does get compiled, that why I wondererd if there was a way to so so with functions also — LocalHorst
– LocalHorst, Commented Aug 14, 2018 at 5:43

configbug · Accepted Answer · 2018-08-13 16:24:09Z

2

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

edited Aug 13, 2018 at 16:24

answered Aug 13, 2018 at 15:57

configbug

1,19414 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LocalHorst Over a year ago

If I do so, the function does not get called on click

configbug Over a year ago

in which life cycle are you declaring "dynMap" ??

LocalHorst Over a year ago

A I see, thank you! The difference is, that you use the String as a regular Angular Template, whereas I create the Template dynamically and add it to the Dom - after it`s compiled. That is why this works for you, but unfortunately not in my case.

dev-assassin · Accepted Answer · 2018-08-13 16:04:03Z

0

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()".

answered Aug 13, 2018 at 16:04

dev-assassin

2712 silver badges13 bronze badges

Collectives™ on Stack Overflow

Template Strings in Angular: How to bind a function?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related