3

I'm using Angular Material Table and want to detect when user scrolls the table. For this, I'm using cdkScrollable.

app-my-component:

<table mat-table cdkScrollable [dataSource]="dataSource">

constructor(private scrollDispatcher: ScrollDispatcher) {
    this.scrollDispatcher.scrolled().subscribe(x => console.log('I am scrolling'));
}

This works fine when app-my-component is part of the root app-component.

But it does not work when app-my-component is inside mat-tab.

<mat-tab-group (selectedTabChange)="tabChanged($event)">
    <mat-tab>
      <ng-template mat-tab-label>
        <span>My Component</span>
      </ng-template>

      <app-my-component></app-my-component>
    </mat-tab>
</mat-tab-group>

The height of table in app-my-component is restricted to height of mat-tab. So the scrollbar appears inside the mat-tab.

How can I make it work when app-my-component is inside mat-tab?

user5155835
  • 2,890
  • 2
  • 24
  • 64

0 Answers0