Dynamic template variable inside event binding

Question

I have an angular component with this kind of template variable name

#name_{{i}}

inside a *ngFor, so that any component generated has a different variable name. I need to pass the entire variable (not as a string, as a reference to the template variable) to a function in a button event binding inside the same *ngfor, like this

(click)="myFunction(name_{{i}})"

Now, I cannot pass it like this

(click)="myFunction('name_'+i)"

because myFunction doesn't want a string as variable, but the template variable reference.

Passing the interpolation inside the event binding causes me this error:

Parser Error: Got interpolation ({{}}) where expression was expected

How can I pass the template variable to the function without using interpolation, as the variable is dynamic?

can you post the entire element? What is name_? Did you try (click)="myFunction({{ 'name_' + i }})" — Ramesh Reddy
– Ramesh Reddy, Commented Jan 10, 2020 at 10:58
what bothers the compiler is my use of interpolation {{}} inside the function call of the event binding; as far as I know in fact it shouldn't be done. I was looking for alternative ways — Eaden
– Eaden, Commented Jan 10, 2020 at 11:03

Pastabolo · Accepted Answer · 2020-01-10 11:23:34Z

5

You don't need to do so.

You don't have to generate a name for each instance or even use @viewChildren.

You can use the same reference name for each element generated by ngFor.

In fact, the reference call is automatically attached to the reference variable it is generated with inside the *ngFor loop directive (it's like a scope inside the template passed to the ngFor directive)

You can write it like this :

<div #item *ngFor="let item of list" (click)="myFunction(item)"></div>

Hope it helps :)

edited Jan 10, 2020 at 11:23

answered Jan 10, 2020 at 11:16

Pastabolo

2341 silver badge5 bronze badges

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

Comments

Sameer · Accepted Answer · 2020-01-10 11:04:04Z

1

You can make use of @ViewChildren

//Html
<element *ngFor="let each of all" (click)="myFunction(i)" #myElement></element>

//TS
 @ViewChildren('myElement') myElementList: QueryList<YourType>;

 myFunction(ind) {
  console.log(this.myElementList.toArray()[ind]);
 }

answered Jan 10, 2020 at 11:04

Sameer

5,2363 gold badges27 silver badges47 bronze badges

1 Comment

Eaden Over a year ago

thank you, unfortunately this solution isn't working for me

Collectives™ on Stack Overflow

Dynamic template variable inside event binding

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related