How to pass value dynamically in (click) = "{{ DynamicFunctionCall }}" in angular HTML Tem-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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