Угловой материал Sidenav cdkScrollable

1. Добавьте в ваше приложение модуль импорта: ScrollDispatchModule.
2. Добавьте cdkScrollable в свой mat-sidenav-content:

<mat-sidenav-content cdkScrollable> </mat-sidenav-content>

3. В корневом компоненте:

а) вставить ScrollDispatcher из @angular/cdk/overlay и подписаться на прокрутку:

constructor(public scroll: ScrollDispatcher) {

    this.scrollingSubscription = this.scroll
          .scrolled()
          .subscribe((data: CdkScrollable) => {
            this.onWindowScroll(data);
          });
}

в) делать что-нибудь при прокрутке, например проверить смещение

private onWindowScroll(data: CdkScrollable) {
    const scrollTop = data.getElementRef().nativeElement.scrollTop || 0;
    if (this.lastOffset > scrollTop) {
      // console.log('Show toolbar');
    } else if (scrollTop < 10) {
      // console.log('Show toolbar');
    } else if (scrollTop > 100) {
      // console.log('Hide toolbar');
    }

    this.lastOffset = scrollTop;
  }

Документация: https://material.angular.io/cdk/scrolling/api

Обновление Angular 9:

Используйте import {ScrollingModule} from '@angular/cdk/scrolling', ScrollDispatchModule устарело

Некоторое время назад я открыл проблему на @ angular / material, и теперь они открывают CdkScrollable-Instance.
Чтобы использовать его, вам нужно получить доступ к MatSidenavContainer с помощью @ViewChild(MatSidenavContainer. У этого экземпляра есть общедоступный член scrollable, то есть экземпляр CdkScrollable.
Пример можно найти здесь

Изменить: поскольку пример не очень полный и некоторые люди испытывают трудности с его реализацией, я напишу здесь свой собственный пример:

HTML:

<mat-sidenav-container>
    <mat-sidenav #sidenav>
        Sidenav Content
    </mat-sidenav>
    <div>
        Main Content
    </div>
</mat-sidenav-container>

TypeScript:

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatSidenavContainer } from '@angular/material';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit  {
  @ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer;

    constructor() {
    }

    ngAfterViewInit() {
      console.log(this.sidenavContainer.scrollable);
    }
}

Важно:

1. Не используйте <mat-sidenav-content>. Этот тег создается автоматически, и к нему прикреплена директива cdkScrollable. Если вы используете <mat-sidenav-content> в своем собственном шаблоне, scrollable будет неопределенным.
2. Используйте AfterViewInit вместо OnInit. Насколько мне известно, @ViewChild решено в AfterViewInit, OnInit, вероятно, слишком рано.