Angular 5 : how to dynamically bind events on button from a list

Question

<div id="home" class="tab-pane fade in" style="text-align:left;opacity: 1;" >
   
  <button *ngFor="let tool of toolArray" class="m-btn btn btn-secondary" type="button" (click)="{{tool.ToolMethod}}()" placement="bottom"
      ngbTooltip="{{tool.Tooltip}}">
      <img src={{tool.ToolImgPath}} alt="" width="24" height="24"/>
  </button>

</div>

Lets say , I have some tools managed by admin , if the user logs in , he can use that tools for editing .

 let toolArray = [
    {ToolCategory: "analysis"
    ToolId: 96
    ToolImgPath: "images/zoom-selection.png"
    ToolMethod: "zoomToClickedFeature"
    ToolName: "an_zoomto_selected"
    Tooltip: "Zoom To Selected Feature"}
]

if I add this in the html using ngFor , its getting error like

Got interpolation ({{}}) where expression was expected

Andrei Tătar · Accepted Answer · 2018-10-18 07:33:38Z

3

If the method is a member of the controller, you should use this like: (click)="this[tool.ToolMethod]()".

Here's a working example:

https://stackblitz.com/edit/angular-q2l54d?file=src%2Fapp%2Fapp.component.html

answered Oct 18, 2018 at 7:33

Andrei Tătar

8,34523 silver badges41 bronze badges

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

2 Comments

AhammadaliPK Over a year ago

but how to handle error if the tool Method is not present in the component ? getting this error ERROR TypeError: _co[_v.context.$implicit.ToolMethod] is not a function ,if we forget to define the method

Andrei Tătar Over a year ago

You could check for undefined before calling (click)="this[item.method]&&this[item.method]()"

Jimmy Hedström · Accepted Answer · 2018-10-18 07:38:57Z

2

Remove the curly brackets from (click)="{{tool.ToolMethod}}()" to (click)="tool.ToolMethod()" and refactor your code to something like this, to get the reference to the corresponding method right:

public zoomToClickedFeature() {
  console.log("do something");
}

public toolArray = [
  {
    ToolCategory: "analysis",
    ToolId: 96,
    ToolImgPath: "images/zoom-selection.png",
    ToolMethod: this.zoomToClickedFeature,
    ToolName: "an_zoomto_selected",
    Tooltip: "Zoom To Selected Feature"
  }
];

Array and function must be class properties of the component.

answered Oct 18, 2018 at 7:38

Jimmy Hedström

5712 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular 5 : how to dynamically bind events on button from a list

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related