Dynamic function name in Angular 2 click event

Question

While this answer is probably dead simple, I seem to be stuck. As an Angular 2 beginner, I have tried all possible combinations of {}, [] and () brackets to achieve the following:

<button (click)="this.action">Click me</button>

where:

this.action = "clickMe()"

i.e. it is a string, a name of the method in that component that should be executed on click.

Any ideas?

yurzui · Accepted Answer · 2016-12-17 12:18:29Z

21

You can use square bracket syntax like

(click)="this[action]()"

where

action="clickMe"

edited Dec 17, 2016 at 12:18

answered Dec 17, 2016 at 11:19

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

2 Comments

Xin Meng Over a year ago

just mention: the action should be the string of the method name

Hirusha Fernando Over a year ago

This gives me an error like this

error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Component'.

Collectives™ on Stack Overflow

Dynamic function name in Angular 2 click event

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related