Angular 2 set dynamic functions name on element

Question

Hi I try to add dynamic functions name on button but don't know how to do that try something but doesn't work.

My example

<button md-icon-button (click)="on{{scial.name}}()"><i class="{{social.icon}} "></i></button>

it's on *ngFor

Is it realy to do?

In general {{}} is not supposed to be used together with [input] or (event). If you use [] or () then use x + 'y' to concatenate strings in the expression. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 22, 2017 at 16:38

Günter Zöchbauer · Accepted Answer · 2017-02-22 20:32:24Z

3

You need to use this explicitly

<button md-icon-button (click)="this['on' + scial.name]()">

edited Feb 22, 2017 at 20:32

answered Feb 22, 2017 at 16:07

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

Aram Mkrtchyan Over a year ago

it works but give error EXCEPTION: Error in ./SignUpSocialItem class SignUpSocialItem - inline template:3:4 caused by: self.context.self[("on" + self.context.social.name)] is not a function

Günter Zöchbauer Over a year ago

Seems to work without problems for me plnkr.co/edit/zENP2iTnlIzwRJqXjvuf?p=preview

Günter Zöchbauer Over a year ago

You're welcome :) Glad to hear you could make it work.

Günter Zöchbauer Over a year ago

Really, I always thought this is not supported in bindings. Only on the phone right now and can't test. Will have a look later.

Günter Zöchbauer Over a year ago

Just tried it. this['on' + 'Foo']() really works as well. Thanks a lot for the hint.

Collectives™ on Stack Overflow

Angular 2 set dynamic functions name on element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related