Angular 3rd party library interaction

Question

I'm having a weird interaction between two widely used libraries inside my Angular 4 application: ng-bootstrap (ng-bootstrap) and Highcharts (Highcharts).

I have this metering component containing two child components: data-selection and metering-chart, as so:

<div>
    <data-selection (selectedEntities)="onSelectedData()"></data-selection>
    <button (click)="loadMeteringData()">Load Data</button>
    <metering-chart *ngIf="chartData" [chartData]="chartData"></metering-chart>
</div>

Where data-selection contains the following -stripped- template:

[...]
<form class="form-inline">
    <div class="form-group">
        [...]
        <div class="input-group">
            <input class="form-control" 
                   placeholder="yyyy-mm-dd" 
                   name="dpStart" 
                   [(ngModel)]="startDateModel" 
                   ngbDatepicker 
                   #startDate="ngbDatepicker">
            <div class="input-group-addon" 
                 (click)="startDate.toggle()">
                <i class="fa fa-calendar"></i>
            </div>
            [...]
        </div>
    </div>
</form>
[...]

And the metering-chart component contains:

<chart [options]="options" 
    (load)="createChartObject($event.context)"
    (drilldown)="drilledDown($event)"
    (drillup)="drilledUp($event)" style="width:100%; display: inline-block; "></chart>

The metering component is a router-outlet declared in a Routes file, which is in turn imported by a RoutingModule. This RoutingModule imports SharedModule (where both child components: data-selection and metering-chart are declared and exported), and is imported by the main AppModule.

Since initially metering's chartData is undefined, the metering-chart component is not displayed. During this time, the datepickers work like a charm.

However, it is only when I click the button to load the chart's data and the chart itself, that the datepicker's popup containers become unresponsive.

I have tried to create a plunker where the issue was reproduced, but to no avail... However, here's a gif showing what's going on:

As you can see, the model is being updated when the date is typed directly into the input field. However, clicking on any of the dates yield no result whatsoever.

I'm using the following:

Angular v. 4.0.1 angular2-highcharts v. 0.5.5 ng-bootstrap v. 1.0.0-alpha.27

I could provide a ton more information regarding architecture or component interaction, but there's so much of it that, if anything critical should be missing from my question, please tell me and I'll provide it all.

Answer 1

Taken from Alios' answer which links to ng-boostrap's GitHub issue page:

The problem does not reside in a faulty interaction between libraries, but rather in a wrong creation of the chart element. Apparently it was being created inside an Angular Zone, thus triggering change detection on every event handler.

The solution was to remove the chart creation & update event bindings from the metering-chart component template, leaving it like so:

<div id="chart-container"></div>

And leaving the the chart creation, data update, and drilldown/up events to be handled outside the angular zone:

this.zone.runOutsideAngular(() => {
    // Create or Update the chart
})

Furthermore, all the event bindings defined in the previous <chart> element have to be redefined inside the component's logic and options object.