title: Angular 2 element dynamic ref
body: <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>