FusionCharts won't work with NGBootstrap modals

Issue

I am trying to get a click event on a FusionCharts graph to open an NgBootstrap modal window. The modal elements get inserted in the DOM but the show class doesn't get added.

This is what the result is when clicking on the chart and triggering the modal:

And this is what the normal result is, from clicking the button outside the chart:

The app.component.ts file:

<fusioncharts width="700"
              height="400"
              type="Column2d"
              (chartClick)="chartClick()"
              [dataSource]="dataSource">
</fusioncharts>

<button class="btn btn-primary" (click)="plainModal()">Plain modal</button>

The app.component.ts file:

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { PlainModalComponent } from './plainmodal.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    dataSource: Object;

    constructor(private modalService: NgbModal) {


        // Preparing the chart data
        const chartData = [
            {
                label: "Venezuela",
                value: "290"
            },
            {
                label: "Saudi",
                value: "260"
            },
            {
                label: "Canada",
                value: "180"
            },
            {
                label: "Iran",
                value: "140"
            },
            {
                label: "Russia",
                value: "115"
            },
            {
                label: "UAE",
                value: "100"
            },
            {
                label: "US",
                value: "30"
            },
            {
                label: "China",
                value: "30"
            }
        ];
        // Chart Configuration
        const dataSource = {
            chart: {
                caption: "Countries With Most Oil Reserves [2017-18]", //Set the chart caption
                subCaption: "In MMbbl = One Million barrels", //Set the chart subcaption
                xAxisName: "Country", //Set the x-axis name
                yAxisName: "Reserves (MMbbl)", //Set the y-axis name
                numberSuffix: "K",
                theme: "fusion" //Set the theme for your chart
            },
            // Chart Data - from step 2
            data: chartData
        };
        this.dataSource = dataSource;
    }

    plainModal() {
        this.modalService.open(PlainModalComponent);
    }

    chartClick() {
        this.modalService.open(PlainModalComponent);
    }

}

The plainmodal.component.ts file:

import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'ngbd-modal-content',
    template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
    </div>
    <div class="modal-body">
      <p>Hello!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class PlainModalComponent {
    constructor(public activeModal: NgbActiveModal) { }
}

My package.json file:

{
  "name": "modaltest",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.3.11",
    "@angular/common": "^13.3.11",
    "@angular/compiler": "^13.3.11",
    "@angular/core": "^13.3.11",
    "@angular/forms": "^13.3.11",
    "@angular/localize": "^13.3.11",
    "@angular/platform-browser": "^13.3.11",
    "@angular/platform-browser-dynamic": "^13.3.11",
    "@angular/router": "^13.3.11",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@popperjs/core": "^2.10.2",
    "angular-fusioncharts": "^4.0.0",
    "bootstrap": "^5.1.3",
    "fusioncharts": "^3.19.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.2.5",
    "@angular/cli": "^13.2.5",
    "@angular/compiler-cli": "^13.3.11",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }
}

My app.modul.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { FusionChartsModule } from "angular-fusioncharts";

// Import FusionCharts library and chart modules
import * as FusionCharts from "fusioncharts";
import * as charts from "fusioncharts/fusioncharts.charts";
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { PlainModalComponent } from './plainmodal.component';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, charts, FusionTheme);

@NgModule({
    declarations: [
        AppComponent, PlainModalComponent
    ],
    imports: [
        BrowserModule, FusionChartsModule, NgbModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

---

edit

If I do this:

this.modalService.open(PlainModalComponent, {
        windowClass: 'show',
        backdropClass: 'show'
    });

Then the show class gets added to the window, but not the backdropclass. So, some progress, but still not ideal.

Solution

This is being caused by FusionCharts running outside of the Angular 'zone'.

See: https://github.com/fusioncharts/angular-fusioncharts/blob/develop/src/angular-fusioncharts/src/fusioncharts.component.ts#L476

To fix it, try:

constructor(private modalService: NgbModal, private zone: NgZone) {}

chartClick() {
    this.zone.run(() => {
        this.modalService.open(PlainModalComponent);
    });        
}

Answered By - Sean