Interacting with third-party libraries in Angular development

Encountering a peculiar conflict between two popular libraries within my Angular 4 project: ng-bootstrap (ng-bootstrap) and Highcharts (Highcharts).

The metering component houses two child components: data-selection and metering-chart, structured like this: 

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

The data-selection component template includes the following -stripped- section:

[...]
<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>
[...]

While 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 utilized as a router-outlet defined in a Routes file, which is then 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.

Initially, when chartData in metering is undefined, the metering-chart component remains hidden. During this state, the datepickers function properly.

However, upon clicking the button to load the chart's data and render it, the datepicker popups stop responding.

Attempts to recreate the issue in a plunker have been unsuccessful, but a gif showcasing the problem can be viewed here:

https://i.sstatic.net/ohUWJ.gif

It is observable that updating the model directly in the input field works, but selecting any dates from the popup does not trigger any action.

The following technologies are being used:

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

There is additional architectural and component interaction information available if needed, so please let me know if any crucial details are missing.

angulartypescripthighchartsbootstrap-4ng-bootstrap

Answer №1

Referenced from Alios' response that directs to ng-boostrap's GitHub issue page:

The issue does not stem from a flawed interaction between libraries but rather from incorrectly creating the chart element. It seems that it was being generated within an Angular Zone, leading to change detection being triggered with every event handler.

The solution involved removing the chart creation & update event bindings from the metering-chart component template, leaving it as follows:

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

This required handling the chart creation, data updates, and drilldown/up events outside of the angular zone like this: 

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

Additionally, all event bindings specified in the previous <chart> element needed to be redefined within the component's logic and options object.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring ways to conduct a thorough scan of object values, inclusive of nested arrays

My goal is to extract all values from an object. This object also includes arrays, and those arrays contain objects that in turn can have arrays. function iterate(obj) { Object.keys(obj).forEach(key => { console.log(`key: ${key}, value: ${o ...

typescriptiteration

Creating formGroups dynamically for each object in an array and then updating the values with the object data

What I am aiming to accomplish: My goal is to dynamically generate a new formGroup for each recipe received from the backend (stored in this.selectedRecipe.ingredients) and then update the value of each formControl within the newly created formGroup with t ...

javascriptangulartypescriptangular-reactive-forms

Discovering the way to retrieve information from a service in Angular post-subscription

This is the service I provide: getDataDetails(id: any) { this.dataDocumment = this.afs.doc('data/' + id); return this.data = this.dataDocumment.valueChanges().subscribe(res =>{ this.data = res; console.log(this.data); ...

angularobservableangular-services

Tips for converting Javascript require to Typescript import using the const keyword

Recently, I've been attempting to import faktory_worker_node from github.com/jbielick/faktory_worker. The README provides the following instructions: const faktory = require('faktory-worker'); faktory.register('ResizeImage', asyn ...

javascripttypescript

Step-by-step guide to integrating Google AdSense ads.txt file into an Angular project

If you're experiencing problems with Google AdSense in your Angular project, it could be related to how static files are served within Angular and handled by servers. Let's go through the necessary steps to ensure that your ads.txt file is proper ...

angular

Encountering the message "npm ERR! missing script: start" following the update to .Net 3.0

Previously, the ASP.Net Core 2.2 code (upgraded from 2.1) did not include a start script in package.json. https://github.com/TrilonIO/aspnetcore-angular-universal/blob/master/package.json Upon upgrading to ASP.Net Core 3.0, it now requires a start script ...

node.jsangularasp.net-corenpm

The npm start command is no longer functioning in Angular 5

When attempting to start angular 5 with npm, I encountered an error that reads: TypeError: callbacks[i] is not a function Can anyone shed some light on where this error might be coming from? It seemed to pop up out of the blue and I can't seem to ...

javascriptangularnpmangular5

Utilize Angular 7 to incorporate properties into a reusable template

Throughout my project, I have been using a template extensively: <div class="col-xs-6 event" *ngFor="let event of events"> <h1>{{ event.title }}</h1> <p>{{ event.content }}</p> </div> This template utilizes various ...

angulartemplates

Incorporating Firebase administrator into an Angular 4 project

Currently encountering an issue while trying to integrate firebase-admin into my angular project. Despite my efforts, I am unable to resolve the error that keeps popping up (refer to the screenshot below). https://i.stack.imgur.com/kdCoo.png I attempted ...

angulartypescriptfirebasefirebase-admin

Creating a one-of-a-kind entry by adding a number in JavaScript

I am looking for a way to automatically add an incrementing number to filenames in my database if the filename already exists. For example, if I try to add a file with the name DOC and it is already present as DOC-1, then the new filename should be DOC-2. ...

javascriptmysqlnode.jstypescriptsequelize.js

Most Effective Approach for Handling Multiple Fetch Requests Concurrently using Async-Await in TypeScript?

I am currently exploring the idea of making multiple API calls simultaneously by utilizing multiple fetch requests within an await Promise.all block, as shown below: const responseData = await Promise.all([ fetch( DASHBOARDS_API + "getGoal ...

typescriptasync-awaitfetch

Accurate function calls with multiple parameters in TypeScript

As a beginner in TypeScript and currently exploring its integration with AngularJS, I am facing a particular issue where the compiler is not detecting an error. In Angular, a resource provider typically includes a get() method that returns an instance of ...

angularjstypescriptoverloading

Retrieve the child nodes from the array and organize them into a

Given an array of regions, where the highest region has key: 10 and parent_id: null, the goal is to restructure this array in order to return a tree representation. The desired regions tree structure for input [10] should be: Egypt Zone 1 Tagamo3 Giza H ...

javascripttypescript

Can ng-packagr create scripts that are compatible with running in a web browser like regular JavaScript?

Is it feasible to utilize ng-packagr to compile a library into a single script file that can be executed on a web browser by importing it as <script src="bundle.js"></script>? For instance, if I have a main.ts file that contains cons ...

javascriptangulartypescriptng-packagr

Implementing form validation in Angular2 without using the <form> tag

Is there a way to perform form validation in Angular 2 without using the typical form tag setup? For instance, I would like to set a required field below: <div class="form-group"> <label for="name">Name</label> <input type=" ...

angular

Transform a Linear Gradient in CSS into a Stylish Bootstrap Button in HTML

I've crafted an American football field using only CSS. In my Codepen sandbox, you can find the code (I'm utilizing ReactJS). What I'm aiming to achieve is to convert each -webkit-linear-gradient into a clickable button that logs its positi ...

javascriptcssreactjsbootstrap-4linear-gradients

Is it possible for FormArray to return null?

Hello there. I've attempted various methods, but none of them seem to be effective. Currently, I am working on this task where I need to start a formArray for emails. email: [testestest] However, what I have is: email: [testestest] I'm encoun ...

angulartypescriptformsformarray

Is it possible to utilize enums as keys in a Json structure?

I am currently utilizing TypeScript in conjunction with Node.js (MEAN stack). My aim is to incorporate an enum within the property/schema of a JSON object. An example of the enum would be: enum KeyEnums { A: "featureA", B: "featureB&qu ...

node.jsjsontypescriptexpressenums

Create dynamic breadcrumb trails using router paths

I am currently working on developing a streamlined breadcrumbs path for my application. My goal is to achieve this with the least amount of code possible. To accomplish this, I have implemented a method of listening to router events and extracting data fr ...

angulartypescriptangular-routing

Using Angular NgRx - triggering an action from an effect once certain actions yield a result

I'm encountering difficulties in dispatching actions that require results from five other actions (all listed in my effect). Could someone lend a hand? Essentially, I need to trigger an action within the effect only after these five actions have retu ...

javascriptangulartypescriptreduxngrx