0

So I'm new to angular2+, and I have this basic webapp that I built in jhipster which, right now, basically just has a really simple org chart:

https://github.com/dabeng/ng-orgchart

My problem right now is that when I scroll with the mouse over the chart, it also scrolls the whole page, and I want it to just zoom the chart if the mouse is over the chart. How do I do this? I've tried extending the third party lib that I'm using and adding a call to "stopPropagation" on the scroll event, but that didn't seem to do the trick. Here's what I've got: 

import { Directive } from '@angular/core';
import { Host, Self, Optional } from '@angular/core';
import { ɵa as OrgChartContainer } from '@dabeng/ng-orgchart'


@Directive({
  selector: '[jhiCustomOrgChart]'
})
export class CustomOrgChartDirective {

  constructor(@Host() @Self() @Optional() public hostChart : OrgChartContainer) {

     const app = (hostChart as any)._app;

     hostChart.zoomHandler = (ev) => {
        ev.stopPropagation();
        const newScale = 1 + (ev.deltaY > 0 ? -0.2 : 0.2);
        hostChart.setChartScale(newScale);
     }
  }
}
Peter Weeks
  • 291
  • 2
  • 16

1 Answers1

1

found my solution here: Prevent scrolling of parent element when inner element scroll position reaches top/bottom?

just needed to add 

ev.preventDefault()

and that does what I need!

Peter Weeks
  • 291
  • 2
  • 16