Как использовать scrollStrategy в MatDialog?

Если вы хотите прокрутить содержимое диалогового окна, вы должны использовать тег <mat-dialog-content> или использовать директиву mat-dialog-content в своем элементе div. В вашем примере вместо этого попробуйте следующее:

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<mat-dialog-content> <!-- instead of your <div>  or use <div mat-dialog-content> -->
  <p>What's your favorite animal!!!!!!!</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal!!!!!!</p>
  <mat-form-field>
    <input matInput [(ngModel)] = "data.animal">
  </mat-form-field>
</mat-dialog-content> <!-- instead of your </div> -->
<div mat-dialog-actions>
  <button mat-button (click) = "onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close] = "data.animal" cdkFocusInitial>Ok</button>
</div>

И теперь у вашего содержимого диалогового окна должна быть прокрутка сбоку. Подробнее о Контейнер прокручиваемого содержимого диалогового окна читайте на:

https://material.angular.io/components/dialog/api#MatDialogContent

сравнить все файлы разницы. в style.css есть лишний css

.cdk-global-overlay-wrapper {
  pointer-events: auto;
  display: block;
  position: relative;
  overflow: auto;
  text-align: center;
}

.cdk-global-overlay-wrapper::before {
  content: '';
  display: inline-block;
  height: 100%;
  white-space: nowrap;
}

.cdk-overlay-pane {
  display: inline-block;
  position: relative;
  text-align: left;
  white-space: normal;
}

Поскольку https://github.com/angular/material2/pull/11235, .mat-dialog-container получил max-height: inherit, который должен решить вашу проблему.

Установка maxHeight: window.innerHeight + 'px' в конфигурации диалогового окна предотвращает увеличение размера диалогового окна, превышающего размер экрана.

Я пробовал вот так,

const dialogRef = this.dialog.open(LoginModalComponent, {
      autoFocus: false,
      maxHeight: '90vh' //you can adjust the value as per your view
});

Привет, попробуй разместить это на своем style.css или style.scss

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
  overflow: auto;
  pointer-events: auto;  
}

Я искал решение, подобное OP. Уловка в предоставленном пример состоит в том, чтобы установить overflow:auto на .cdk-global-overlay-wrapper.

Добавьте этот CSS в свои стили (не внутри диалогового css):

.cdk-global-overlay-wrapper {
  overflow: auto;
}

Если вы хотите предотвратить прокрутку на заднем фоне, то есть родительском компоненте, вы может установить overflow: hidden для родителя, пока диалог открыт.

.. просто удалите стратегию прокрутки из примера.

Достаточно добавить два атрибута ниже.

.cdk-global-overlay-wrapper {
  overflow: auto;
  pointer-events: auto;  
}