Track scrolling of inner part of external component in Angular

Question

I use googles official material design implementation for Angular. Within their tabs component I have some content and need to track the scroll position of the tabs content.

The div that does actually scroll is automatically generated by angular material, so I cannot add the scroll handler in the HTML-template.

template:

<md-tab-group>
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

output (shortened):

<md-tab-group class="mat-tab-group">
  <md-tab-header class="mat-tab-header">
    <div class="mat-tab-list">
      <div class="mat-tab-labels">Tab 1</div>
      <div class="mat-tab-labels">Tab 2</div>
    </div>
  </md-tab-header>
  <div class="mat-tab-body-wrapper">
    <md-tab-body class="mat-tab-body">
      <div class="mat-tab-body-content">
        Content 1
      </div>
    </md-tab-body>
    <md-tab-body class="mat-tab-body">
      <div class="mat-tab-body-content">
        Content 2
      </div>
    </md-tab-body>
  </div>
</md-tab-group>

the scrolling happens in .mat-tab-body-content-elements, which I cannot access from the template. Any idea on how to track scrolling in there?

tommueller tommueller · Accepted Answer · 2017-06-28T08:51:48

Ok I solved this, you can get the nativeElement of the component and use javascripts querySelector()-function: this.elementRef.nativeElement.querySelector('.mat-tab-body-content')

Track scrolling of inner part of external component in Angular

1 Answers