Как показать / скрыть компонент при нажатии / наведении кнопки в angular?

Question

Я реализую панель инструментов, где каждый маршрут (кнопки навигации), на который я наведен, будет отображать всплывающее окно, подобное bootstrap, содержащее компонент, который я отправляю (вроде как элементы панели навигации здесь ) .

<div *ngFor="let route of toolbarRoutes">
  <button mat-stroked-button class="toolbar-nav-button" (click)="routeTo(route.path)">
    {{route.displayName}}
  </button>
  <app-hoverable *ngIf="route.component" [component]="route.component"></app-hoverable>
</div>

Моя проблема в том, что я хочу отображать / отображать app-hoverable, только если кнопка (<button mat-stroked-button class="toolbar-nav-button" (click)="routeTo(route.path)">) зависает, как я могу это сделать?

Answer 1

Просто так (я сложил атрибуты для удобства чтения):

<div *ngFor="let route of toolbarRoutes">
  <button mat-stroked-button
    class="toolbar-nav-button"
    (click)="routeTo(route.path)"
    (mouseenter)="route.showHoverable=true"
    (mouseleave)="route.showHoverable=false">

        {{route.displayName}}
  </button>

  <app-hoverable *ngIf="route.showHoverable" [component]="route.component"></app-hoverable>

</div>