Angular template containing boolean condition not updating on state change?

Issue

I'm trying to update a template when a pie chart slice is clicked.

This is the template.

    <h1>{{slice && slice.name}}</h1>
    <h1>{{slice && slice.value}}</h1>

Here's a demo. https://stackblitz.com/edit/stackblitz-starters-p8bxjx?file=src%2Fmain.ts,src%2Fecharts.component.ts

When one of the pie chart segments is clicked it emits an object containing the name and value of the segment that was clicked.

The main component receives this via the listener onPieSelect and sets the slice property on the main component like this:

  onPieSelect(e: any) {
    console.log('slice clicked', e);
    this.slice = e;
  }

We can see that the object is being received via the log, however the template is not being updated.

Any ideas?

Solution

echarts spawn events outside of angular, and thus, char events don't trigger change detection.

to fix that wrap the handler into an ngzone run

 ngZone = inject(NgZone);
 ...
 onChartInit(echarts: any) {
    let self = this;
    this.echartsIntance = echarts;
    this.echartsIntance.on('click',  (event: any) => {
      this.ngZone.run(() => {
    // Print name in console
        console.log('Event Name', event.name);
        console.log('Event Value', event.value);
        console.log('Event Value', event.color.colorStops[0].color);
        const pieData: any = { name: event.name, value: event.value };
        self.onPieSliceSelect.emit(pieData);
      })
      
    });
  }

Answered By - Andrei