AmCharts XY Chart - How to get modal popup on click in Angular?

Question

We need to show a modal window show when users click on a data point.

The code we have is:

  constructor(public dataservice: DataserviceService, private modalService: NgbModal, private router: Router) { }
  ...
  ...
  bullet.events.on("hit", function (ev) {
    console.log(ev.target._dataItem.dataContext);
    this.modalService.open(this.dialog);
  });
}

public showDialog() {
  this.modalService.open(this.dialog);
}

We are able to see the log data in console.. but not the modal. How can we solve this?

Answer 1

The code looks fine, however as @yurzui mentioned, the problem lies here

bullet.events.on("hit", function (ev) {}

since the it will be called from another context the modalService is not available there. Try using a arrow-function so the this context is preserved.To fix this,

bullet.events.on("hit", (ev) => {
    console.log(ev.target._dataItem.dataContext);
    this.modalService.open(this.dialog);
 });