title: Angular material table detect Scroll
body: <p>I'm using Angular Material Table and want to detect when user scrolls the table. For this, I'm using <code>cdkScrollable</code>.</p>
  
  <p><code>app-my-component</code>:</p>
  
  <pre><code>&lt;table mat-table cdkScrollable [dataSource]="dataSource"&gt;
  
  constructor(private scrollDispatcher: ScrollDispatcher) {
      this.scrollDispatcher.scrolled().subscribe(x =&gt; console.log('I am scrolling'));
  }
  </code></pre>
  
  <p>This works fine when <code>app-my-component</code> is part of the root app-component.</p>
  
  <p>But it does not work when <code>app-my-component</code> is inside <code>mat-tab</code>.</p>
  
  <pre><code>&lt;mat-tab-group (selectedTabChange)="tabChanged($event)"&gt;
      &lt;mat-tab&gt;
        &lt;ng-template mat-tab-label&gt;
          &lt;span&gt;My Component&lt;/span&gt;
        &lt;/ng-template&gt;
  
        &lt;app-my-component&gt;&lt;/app-my-component&gt;
      &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>The height of table in <code>app-my-component</code> is restricted to height of mat-tab. So the scrollbar appears inside the mat-tab.</p>
  
  <p>How can I make it work when <code>app-my-component</code> is inside <code>mat-tab</code>?</p>