ngx-charts : On click pie chart slice, clicked slice should become active

Question

I am using ngx-chart 5.3.1 & angular 4.1.1. I am tying to highlight a particular slice in the pie chart when click.

On page load, I have given static array

this.activeEntries = [{"name" : "users" , value:4}];

It is highlighting the particular slice properly when the page loads. When clicking a slice of the piechart, I tried to set the activeEntries not highlighting particular slice of pie chart. I need to highlight the particular clicked slice.

component

export class PieChartComponent implements OnInit {

  @Input() data: SingleChartData[] = this.data ? this.data : [];

  @Input() chartInfo : any;


  private pieChartInfo : PieChart;
  private activeEntries : any[] = [{name:'users',value:4}];

  constructor() { }

  ngOnInit() {
    console.log(this.activeEntries);
    this.chartInfo = this.chartInfo === undefined ? {} : this.chartInfo;
    this.pieChartInfo = new PieChart(this.chartInfo);
  }

  onSelect(event) {
    this.activeEntries = [];
    this.activeEntries.push(event);
  }

template

<ngx-charts-pie-chart [scheme]="pieChartInfo.colorScheme" 
  [results]="data" 
  [legend]="pieChartInfo.showLegend" 
  [explodeSlices]="pieChartInfo.explodeSlices" 
  [labels]="pieChartInfo.showLabels" 
  [doughnut]="pieChartInfo.doughnut" 
  [gradient]="pieChartInfo.gradient" 
  (select)="onSelect($event)" 
  [view]="pieChartInfo.view"  
  [activeEntries]="activeEntries" >
</ngx-charts-pie-chart>

Answer 1

What i can see here is that you dont trigger change detection after adding active entry.

onSelect(event) {
  this.activeEntries = [];
  this.activeEntries.push(event);
}

this.activeEntries.push() doesnt trigger change detection because the reference is the same u should try:

onSelect(event) {
  this.activeEntries = [{...event}];
}