如何在 angular HTML Template 中 (click) = "{{ DynamicFunctionCall }}" 动态传值？

Question

In an angular HTML template, I am trying to pass the function name dynamically as the value of

(click) = "{{dynamicFunc Name}}" 

but it is giving interpolation error.

Is there any way if we can make it work?

Answer 1

No, this syntax is incorrect. In Angular templates, you can bind to component properties or methods using the following syntax:

<button (click)="dynamicFuncName()">Click me</button>

You cannot use interpolation syntax {{}} inside the event binding syntax ().

You can use a function inside the interpolation without (click) directive like below. But I don't advise it. İnstead of it, check about Angular Pipe.

<div>{{dynamicFuncName()}}</div>

Answer 2

If you wish dynamic functions name on element. Follow this code:

<button (click)="this[dynamicFuncNamesArray[0]]()">Click me</button>


 dynamicFuncNamesArray = ['dynamicFuncName'];
  dynamicFuncName() {
    console.log('dynamicFunc');
  }