Angular 2 element dynamic ref
<p>I'm using this package to create a popover in my app: <br />
<a href="https://github.com/pleerock/ng2-popover" rel="nofollow noreferrer">https://github.com/pleerock/ng2-popover</a> <br />
The problem is I have a table with <code>ngFor</code> for data, so I need different popovers for different rows. Here is the code:</p>

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

  &lt;div [popover]="actions"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

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