Детали таблицы с угловыми и множественными компонентами

Question

У меня есть стол.Как только я нажимаю на строку, я загружаю некоторые подробности об этой строке.Кроме того, on-click таблица исчезает, и вместо этого появляется новый div с деталями.Я сделал это правильно, используя один компонент, но теперь я хочу разделить все на несколько компонентов.Один для таблицы и один для деталей.Я не хочу снова вызвать службу on click, поэтому я могу просто передать нужные параметры из одного компонента в другой по щелчку.Это то, что я пробовал до сих пор:

Таблица:

<table *ngIf="loading == false && openDetail == false">
        <thead>
          <th>
            Name
          </th>
          <th>
            Birth Year
          </th>
          <th>
            Actions
          </th>
        </thead>
        <tbody>
          <tr *ngFor="let item of list let i = index" [attr.data-index]="i" (openHeroDetailFromAbout) = "openDetailsFunction($event)">
          <!-- <tr *ngFor="let item of list let i = index" [attr.data-index]="i" (click) = "openHeroDetail(item)"> -->
            <td>
              <mat-form-field class="example-full-width" *ngIf="item.edit == true">
                <input matInput placeholder="Name" [(ngModel)]="item.name">
              </mat-form-field>
              <span *ngIf="item.edit == false || item.edit == undefined">
                  {{item.name}}
              </span>
            </td>
            <td>
              <mat-form-field class="example-full-width" *ngIf="item.edit == true">
                <input matInput placeholder="Year" [(ngModel)]="item.birth_year">
              </mat-form-field>
              <span *ngIf="item.edit == false || item.edit == undefined">
                  {{item.birth_year}}
              </span>
            </td>
            <td style="width: 160px">
              <div class="row">
                <div class="col-md-6">
                    <button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "confirmHero(item, $event)" *ngIf="item.edit == true">
                        <mat-icon>check</mat-icon>
                    </button>
                    <button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "editHero(item, $event)" *ngIf="item.edit == false || item.edit == undefined">
                        <mat-icon>edit</mat-icon>
                    </button>
                </div>
                <div class="col-md-6">
                    <button type="button" class="mdc-icon-button material-icons" click-stop-propagation (click) = "deleteHero(i, item, $event)">
                        <mat-icon>delete</mat-icon>
                    </button>
                  </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table> 

и затем под таблицей

<div *ngIf="openDetail == true">
   <app-hero-detail></app-hero-detail>
</div>

Первый компонент с openHeroDetailFromAbout называется TableComponent и там у меня есть это:

openHeroDetailFromAbout(item: any): void {
    item.openDetail = true;
    console.log(item);
  }

второй компонент называется HeroDetailComponent:

 import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
  @Input() heroName: string; // hero's name

  @Output() openDetails = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {

  }

  openDetailsFunction(item: any): void {
    this.openDetails.emit(item);
    this.heroName = item.name;
    console.log(item);
  }

}

Но ничего не срабатывает при щелчке по строке.Я просто передаю item объект от компонента к другому, и в компоненте детали показывают эту информацию.Также console.log() не работает