title: What do I do when two angular libraries have an attribute name conflict?
body: <p>I'm writing an angular application using two libraries: ngx-bootstrap and ng-apexcharts. ApexCharts provides an angular component, called <code>&lt;apx-chart&gt;</code> that takes an input called <code>tooltip</code> of type <code>ApexTooltip</code>. The html looks like this:</p>
  <pre><code>  &lt;apx-chart 
      [series]=&quot;[{data: timelineData}]&quot;
      [chart]=&quot;timeline.chart&quot;
        [fill]=&quot;timeline.fill&quot;
        [legend]=&quot;timeline.legend&quot;
        [plotOptions]=&quot;timeline.plotOptions&quot;
        [xaxis]=&quot;timeline.xaxis&quot;
        [colors]=&quot;timeline.colors&quot;
        [title] = &quot;timeline.title&quot;
        [tooltip]=&quot;timeline.tooltip&quot;
        [yaxis] = &quot;timeline.yaxis&quot;
     &gt;&lt;/apx-chart&gt;
  </code></pre>
  <p>Here is a link to the angular apex charts documentation: <a href="https://apexcharts.com/docs/angular-charts/" rel="noreferrer">https://apexcharts.com/docs/angular-charts/</a></p>
  <p>ngx-bootstrap provides a module called <code>TooltipModule</code> that when imported into the app module, allows you to put a <code>tooltip</code> 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:</p>
  <pre><code>  &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-secondary mb-2&quot;
        tooltip=&quot;Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
        placement=&quot;top&quot;&gt;
      Tooltip on top
    &lt;/button&gt;
  </code></pre>
  <p>Here's a link to the ngx-bootstrap tooltips documentation: <a href="https://valor-software.com/ngx-bootstrap/#/tooltip" rel="noreferrer">https://valor-software.com/ngx-bootstrap/#/tooltip</a></p>
  <p>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.</p>
  <pre><code>@NgModule({
    imports: [
      BrowserModule,
      TooltipModule.forRoot(),
      ...
    ]
  ...
  </code></pre>
  <pre><code>Error: src/app/activity-report/details/details.component.html:52:8 - error TS2322: Type 'ApexTooltip' is not assignable to type 'string | TemplateRef&lt;unknown&gt;'.
    Type 'ApexTooltip' is not assignable to type 'string'.
  
  52       [tooltip]=&quot;timeline.tooltip&quot;
            ~~~~~~~
  
  </code></pre>
  <p>The problem is that it looks like ngx-bootstrap is trying to validate the input to the apx-chart component as if <code>[tooltip]</code> 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.</p>