How to create different template reference variable for items in *ngFor angular

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>

Your template looks correct and should work as expected. Every variable passed into `onFocus` will have an unique reference to the individual button. Are you doing anything else with the button? — Sonu Kapoor, Jan 15 '18 at 13:57
It has a bug that `onFocus()` is called at the wrong time because of the same template reference variable — matchi, Jan 15 '18 at 13:58
hm. Try passing in `$event` - onFocus($event): https://angular.io/guide/user-input — Sonu Kapoor, Jan 15 '18 at 14:01
It should work for the same name. Can you add more code? What is the ToolTipDirective? — yurzui, Jan 15 '18 at 14:04
I want onFocus to perform some action with the ToolTipDirective of that button, but passing $event does not solve that. I cannot get the ToolTipDirective from the event. — matchi, Jan 15 '18 at 14:05
ToolTipDirective is when you set [tooltip]="Tooltip Text", it shows a text when hovering over. — matchi, Jan 15 '18 at 14:06
as argument to `onFocus(button1)` which accepts a ToolTipDirective — matchi, Jan 15 '18 at 14:09
Check second part of https://stackoverflow.com/questions/44440879/dynamic-template-reference-variable-inside-ngfor-angular-2/44441164#44441164 — yurzui, Jan 15 '18 at 14:10
it works, but my point is if I have 10 buttons that I populate using an *ngFor, how would I set `#button1=bs-tooltip`, `#button2=bs-tooltip`, etc.? — matchi, Jan 15 '18 at 14:14
Why do you want that? Just use `#button="bs-tooltip"` they will be different for each item in loop — yurzui, Jan 15 '18 at 14:19
It's not different. I tried it and I got a bug where the tooltip was showing up when it shouldn't because the buttons have the same template reference variable. — matchi, Jan 15 '18 at 14:24
@yurzui I added a complete explanation of why I need to do it that way — matchi, Jan 15 '18 at 14:33
@matchi are you able to create a reproduce-able stackblitz? The buttons should all be different. — Sonu Kapoor, Jan 15 '18 at 14:56

score 0 · Answer 1 · answered Jan 16 '18 at 05:47

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'">

How to create different template reference variable for items in *ngFor angular

1 Answers1