Modal 'show' classes not added to modal triggered from third-party click event.

[capesean]

Bug description:

I'm using Angular Fusion Charts to create a chart, and then want to open a modal window when the user clicks on an item in the chart. However, when the modal opens, it doesn't have the show classes applied to the window nor the backdrop. See:

I have tracked this down to this point of the ngbootstrap code:

When the click event is triggered from within the FusionChart, the zone is stable, but when it's triggered normally from outside, the zone is not stable. In the first case, this presumably means that the onStable EventEmitter will not fire, and thus not add the show modal classes.

I don't know if this is an issue with ngbootstrap or fusioncharts but I had to post somewhere to start. I'm trying to dig deeper but am not sure what else to do from here - if someone could guide me that would be great. I suspect it's because it's running outside the Angular zone?

        this.zone.runOutsideAngular(function () {
            setTimeout(function () {
                _this.chartObj = FusionChartsConstructor(_this.fusionchartsService, configObj);
                _this_1.initialized.emit({ chart: _this.chartObj });
                _this.chartObj.render(_this.element.nativeElement.querySelector('div'));
            }, 1);
        });

Link to minimally-working StackBlitz that reproduces the issue:

I have tried getting a StackBlitz/CodeSandbox to work but it's incredibly temperamental with package versions and whatnot. Here are some attempts (that need tweaking):

https://codesandbox.io/s/vigorous-moon-ebi7s6?file=/package.json

https://stackblitz.com/edit/angular-ivy-pfjafu?file=package.json

Here's a StackBlitz forked from the modal demo, but as soon as I add the fusioncharts then I get a CORS issue: https://stackblitz.com/edit/angular-gkv5fq

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 13.3.11

ng-bootstrap: 12.1.2

Bootstrap: 5.1.3

[capesean]

I've fixed this by explicilty running the code inside the Angular zone:

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

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

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