Angular 2 element dynamic ref

Question

I'm using this package to create a popover in my app:
https://github.com/pleerock/ng2-popover
The problem is I have a table with ngFor for data, so I need different popovers for different rows. Here is the code:

<div class="dt-row" *ngFor="let key of keys">
  <popover-content #actions
                   title="Actions"
                   placement="bottom"
                   [animation]="false"
                   [closeOnClickOutside]="true"
                   [closeOnMouseOutside]="false"
                   [disabled]="false"
                   [onHover]="false">
    <a>Edit</a>
    <a>Delete</a>
  </popover-content>

  <div [popover]="actions">
    ...
  </div>
</div>

So actions ref is same for all ngFor instances.
How can I make that ref dynamic? Something like [ref]="'actions-' + key.id".

Answer 1

As the comment suggests you would use the index:

<div class="dt-row" *ngFor="let key of keys; let i = index;">
            <popover-content #i
                             title="Actions"
                             placement="bottom"
                             [animation]="false"
                             [closeOnClickOutside]="true"
                             [closeOnMouseOutside]="false" >
              {{key.interestingInfo}}
                <a>Edit - {{key.name}}</a>
                <a>Delete - {{key.name}}</a>
            </popover-content>

            <div [popover]="i">
                {{key.clickText + key.name}}
            </div>
    </div>
</div>

And here's a link to a working plunker demonstrating the popup-content has different content: http://plnkr.co/edit/kVJSnn?p=preview