How to pass a dynamic template reference variable in a function using angular 6

Question

I am trying to achieve this functionality but getting error

<div *ngFor="let item of items; index as i">
    <div #menu{{i}}>
        //Some code
    </div>
    <div (onClick)="Clicked($event,menu{{i}})">
        //Some other code
    </div>

Got interpolation ({{}}) where expression was expected at column 19 in [Clicked($event,menu{{i}})]

Anyone knows how to fix it?

Tried (onClick)="Clicked($event,menu+i) and (onClick)="Clicked($event,'menu'+i) still no luck — Danish, Jul 30 '18 at 13:38

score 12 · Accepted Answer · answered Jul 30 '18 at 13:50

12

You can use the ViewChildren decorator which returns a QueryList : you don't need to use an index anymore, Angular will handle all of that for you.

See this stackblitz to see it in action (open your console before clicking on the buttons)

answered Jul 30 '18 at 13:50

Awesome! Thanks! – Gargamil Jan 15 '19 at 21:46

score 0 · Answer 2 · answered Jul 16 '20 at 17:46

I just had this same problem and solved it by referencing the unique id of the same element that I had the template reference variable on, and I believe you could do the same.

<div class="outer-element" #outerElement>
  <div *ngFor="let item of items; index as i">
    <div id="menu{{i}}">
        //Some code
    </div>
    <div (onClick)="Clicked($event, outerElement.querySelector('#menu' + i)">
        //Some other code
    </div>
  </div>
</div>

score -2 · Answer 3 · answered Jul 30 '18 at 13:43

Dynamic Template Reference is not feasible in Angular. You can try these 2 solutions.

Solution 1 :

Attach 'id' property to div element i.e 'menu1' and pass the id to the component on click method and access the DOM using document.querySelector()

Solution 2:

Create a attribute directive in which you can pass id as @Input and access elementRef in the constructor().

How to pass a dynamic template reference variable in a function using angular 6

3 Answers3