0

I'm using a charting library and it either doesn't function as I expect it to or has a bug (or both...) and I'm curious if I can simply disable some functionality by overriding a binding or something. I'm not sure if its fundamentally an angular question or a javascript one.

In this definition below, for example, I'm not satisfied with how (activate) and (deactivate) are working.

       <svg:g
          *ngFor="let group of results; let index = index; trackBy:trackBy"
          [@animationState]="'active'"
          [attr.transform]="groupTransform(group)">
          <svg:g ngx-charts-series-vertical
            type="stacked"
            [xScale]="xScale"
            [yScale]="yScale"
            [activeEntries]="activeEntries"
            [colors]="colors"
            [series]="group.series"
            [dims]="dims"
            [gradient]="gradient"
            [tooltipDisabled]="tooltipDisabled"
            [tooltipTemplate]="tooltipTemplate"
            [showDataLabel]="showDataLabel"
            [dataLabelFormatting]="dataLabelFormatting"
            [seriesName]="group.name"
            [animations]="animations"
            (select)="onClick($event, group)"
            (activate)="onActivate($event, group)"
            (deactivate)="onDeactivate($event, group)"
            (dataLabelHeightChanged)="onDataLabelMaxHeightChanged($event, index)"
          />

I tried to extend the component so I could override that functionality but when I start the application up I get the especially unhelpful error in the browser "Cannot GET/" and no output in the server debug log to tell me what is incorrect, it simply says "i ｢wdm｣: Failed to compile." This happens if include the component in my app declarations at all, even if it's not referenced anywhere.

import { Component } from '@angular/core';
import { StackedBarViewComponent } from './stackedbarview.component';
import { BarVerticalStackedComponent } from '@swimlane/ngx-charts';

@Component({
  selector: 'verticalstackedbarchartca',
  templateUrl: './verticalstackedbarchartca.component.html',
  styleUrls: ['./verticalstackedbarchartca.component.css']
})

export class VerticalStackedBarChartCustomActivenessComponent extends BarVerticalStackedComponent {


  onActivate(event, group?) {
    console.log('custom onActivate(' + event + "," + group + ")");
  }

  onDeactivate(event, group?) {
    console.log('custom onDeactivate(' + event + "," + group + ")");
  }
}

This is in Visual Studio 2017.

Chris
  • 679
  • 1
  • 11
  • 26
  • If you have to pass callbacks into the component like `(activate)="..."` and `(deactivate)="..."` then the component has `@Output` parameters and that's what you'd need to override (although I'm not sure if that's possible). – Frank Modica Oct 26 '18 at 15:01
  • 1
    Inheritance isn't really what Angular is about; as the proverb goes "Favor [composition over inheritance](https://en.wikipedia.org/wiki/Composition_over_inheritance)". Thus there's not much built in (anymore). See e.g. https://stackoverflow.com/q/47504711/215552 and https://alligator.io/angular/component-inheritance/ or https://blog.angularindepth.com/changing-the-behavior-of-a-3rd-party-angular-component-91f84fb9af28. – Heretic Monkey Oct 26 '18 at 15:13
  • I was looking for a quick and dirty way to use an existing 3rd party component while overriding some of its functionality. Is there an alternative? – Chris Oct 26 '18 at 15:15

0 Answers0