How to use scrollStrategy in MatDialog?

If you want to scroll the content of the dialog then you have to use the <mat-dialog-content> tag, or use the directive mat-dialog-content in your div element.In your example try the following instead:

<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>

And now your dialog content should have a scroll on the side.Read more about the Scrollable content container of a dialog on:

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

I tried this way,

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

Hi try to put this on your style.css or style.scss

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