CODEWITHSUNDEEP
angularngx-bootstrapapexchartsproperty-bindingname-conflict
Paul B
Paul B

Reputation: 135

What do I do when two angular libraries have an attribute name conflict?

I'm writing an angular application using two libraries: ngx-bootstrap and ng-apexcharts. ApexCharts provides an angular component, called <apx-chart> that takes an input called tooltip of type ApexTooltip. The html looks like this:

  <apx-chart 
    [series]="[{data: timelineData}]"
    [chart]="timeline.chart"
      [fill]="timeline.fill"
      [legend]="timeline.legend"
      [plotOptions]="timeline.plotOptions"
      [xaxis]="timeline.xaxis"
      [colors]="timeline.colors"
      [title] = "timeline.title"
      [tooltip]="timeline.tooltip"
      [yaxis] = "timeline.yaxis"
   ></apx-chart>

Here is a link to the angular apex charts documentation: https://apexcharts.com/docs/angular-charts/

ngx-bootstrap provides a module called TooltipModule that when imported into the app module, allows you to put a tooltip property on any element, and when a user hovers their mouse over the element, it will create a tooltip. Here's what that looks like:

  <button type="button" class="btn btn-default btn-secondary mb-2"
      tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
      placement="top">
    Tooltip on top
  </button>

Here's a link to the ngx-bootstrap tooltips documentation: https://valor-software.com/ngx-bootstrap/#/tooltip

I'm trying to use these two libraries together, but when I add the tooltip module to the app module imports I get a compilation error.

@NgModule({
  imports: [
    BrowserModule,
    TooltipModule.forRoot(),
    ...
  ]
...

Error: src/app/activity-report/details/details.component.html:52:8 - error TS2322: Type 'ApexTooltip' is not assignable to type 'string | TemplateRef<unknown>'.
  Type 'ApexTooltip' is not assignable to type 'string'.

52       [tooltip]="timeline.tooltip"
          ~~~~~~~

The problem is that it looks like ngx-bootstrap is trying to validate the input to the apx-chart component as if [tooltip] is a bound property and not an ApexChart component input. I've never run into this type of name conflict, and I honestly had trouble coming up with the words to describe it, so if you have any advice, even on vocabulary or knowing the right words to google, I would really appreciate your help.

Upvotes: 6

Views: 339

Answers (1)

Raphael Springer
Raphael Springer

Reputation: 67

I had exactly the same problem as you with apexcharts and ngx-bootstrap. The [tooltips] was always referencing to ngx when trying to create custom tooltips. In order to solve the problem, you shall isolate the chart-module from other app module(s). in your component folder where you are configurating the chart (let's name it bar-chart, create a new file called

bar-chart.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BarChartComponent } from './bar-chart.component';
import { NgApexchartsModule } from 'ng-apexcharts';

@NgModule({
    declarations: [
        BarChartComponent
    ],
    imports: [
        BrowserModule,
        NgApexchartsModule
    ],
    exports:[
        BarChartComponent
    ]
})
export class BarChartModule { }

Then, in your app.module.ts, add the BarChartModule to your imports. This should solve the reference issue.

Upvotes: 1

Related Questions