Chart.jsのonHoverイベントでデータ更新しても変更検知されない

Chart.js で表示したグラフから、特定のデータを削除できるようにしたい。

データ点をクリックした時に onHover イベントの中から親コンポーネントへ通知し、削除ボタンを表示するように実装した。が、なぜかクリックしても削除ボタンが表示されない。フレームワークに Angular を使っており、外部ライブラリのイベントの場合にうまく変更検知してくれていなさそうな気配。

調べたところ、ChangeDetectorRef の detectChanges でいけそう。

https://angular.io/api/core/ChangeDetectorRef#detectchanges

試してみると、削除ボタンが表示されるようになった！

が、クリックした時に表示している Angular Material の Dialog が微妙な動きをする。MAT_DIALOG_DATA で渡しているはずのデータが渡せていなかったり、mat-dialog-close を使ったキャンセルボタンが反応しなかったり…

Angular DevTools で見てみると、Dialog のコンポーネントがコンポーネントツリーに表示されない。他の箇所で使っている Dialog ではちゃんと表示されているのだが…

よくわからないなーと思いつつ、別のブログで見た ngZone の run を試すとちゃんと動いた！

  constructor(private dialog: MatDialog, private ngZone: NgZone) { }

  onChartClick(dataIndex: number) {
    this.ngZone.run(() => {
      this.clickedDataIndex = dataIndex;
    });
  }