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
?