如何为* ngFor中的项目创建不同的模板参考变量

Question

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.

Why I need to do this: 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: <button #button1=bs-tooltip (focus)="button1.toggle()" (blur)="button1.toggle()" [tooltip]=button.tooltip" >{{button.text}}</button> . 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).

Code:

<li *ngFor="let button of buttons">
   <button #button1=bs-tooltip (focus)="onFocus(button1) [tooltip]=button.tooltip" >{{button.text}}</button> --> how can I set #button1?
</li>

Answer 1

you can bind id property and then use document to get the html element

here is an example

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  onClick(foo) {
    console.log(foo)
  }

  getElementById(id) {
    return document.getElementById(id);
  }
}

app.component.html

<button (click)="onClick(getElementById('foo'))">click </button>

<input [id]="'foo'">