title: How to create different template reference variable for items in *ngFor angular
body: <p>I have a list of button attributes and I want the buttons to have different template reference variables, but I'm rendering them using *ngFor. How can I set the reference variable to be #button1, #button2, etc. I need to set the template reference variable to be the ToolTipDirective for that button.</p>
  
  <p><strong>Why I need to do this:</strong> The button's tooltip is not accessible in Firefox (the tooltip doesn't show when using TAB). So, to make the tooltip show, I need the button to be: <code>&lt;button #button1=bs-tooltip (focus)="button1.toggle()" (blur)="button1.toggle()" [tooltip]=button.tooltip" &gt;{{button.text}}&lt;/button&gt;</code>. Using the same template reference variable creates a problem where the tooltip for a button is shown when the focus is on another button (both tooltips are shown, but only 1 should show).</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;li *ngFor="let button of buttons"&gt;
     &lt;button #button1=bs-tooltip (focus)="onFocus(button1) [tooltip]=button.tooltip" &gt;{{button.text}}&lt;/button&gt; --&gt; how can I set #button1?
  &lt;/li&gt;
  </code></pre>