Angular 6: Делаем события одинаково динамичными на элементах * ngFor-dynamic-generated-template-elements

Обычно в Angular для отображения и скрытия вещей я создаю переменную в компоненте, создаю событие mouseover-mouseout для элемента, который переключает эту переменную, и помещаю ngIf на любой элемент, на который я хочу, чтобы это событие повлияло (отображение / скрытие).

Вы не можете подойти к этому так, если шаблон находится внутри ngFor. Когда вы наводите курсор на любой из динамически сгенерированных элементов, он запускает КАЖДОЕ отображение / скрытие. Таким образом, мой вопрос заключается в том, используя директивы Angular star, как я могу сделать события одинаково динамичными для * ngFor-dynamic-generated-template-elements, чтобы при наведении курсора на один из этих элементов шаблона генерировалось соответствующее событие? Более конкретно (см. Stackblitz ниже), как мне получить ОДНУ всплывающую подсказку, когда я наведен на соответствующее событие шаблона?

Как люди это обходят. Можете ли вы создать динамически генерируемые имена переменных? Будет ли это масштабируемым подходом, когда у вас есть сотни тысяч строк? Возможно нет. Должен быть способ.

Вот мой Stackblitz, демонстрирующий то, о чем я говорю.

Шаблон:

<h1>Tool tip example</h1>
<p>
  Events on dynamically generated template from *ngFor :)
</p>
<p>
  Requirements: Make a tooltip appear with the rest of the information on hover.
</p>


<table>
  <tr>
    <th>id</th>
    <th>name</th>
    <th>gender</th>
  </tr>
  <tr *ngFor="let object of this.data.arrayOfObjects">
    <td (mouseenter)="tooltipHover=!tooltipHover" (mouseleave)="tooltipHover=!tooltipHover" class="id-pointer">
      {{object.friends.length}}
        <div *ngIf="this.tooltipHover" class="tooltip">
Tooltip:
more info here

  </div>
    </td>
    <td>{{object.name}}</td>
    <td>{{object.gender}}</td>


  </tr>


</table>

Составная часть:

import { Component } from '@angular/core';
import {Data} from './../../data'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  tooltipHover:boolean =false;

  constructor(public data: Data){}


}