Do nothing on Angular material dialog scrolling

If you are using Angular Material Dialogs for example and when it pops up the page seems to move a bit, well that might be due to the scrolling strategy that the dialog is using. If you don’t want to see this annoying effect you can use the NoopScrollStrategy as ScrollStrategy, thus there is no influence on scrolling when the angular material dialog is opened.

One way to do that, is to set it via ScrollStrategyOptions to replace the default behaviour. First define a scrollStrategy variable and set the value to NoopScrollStrategy by calling the noop() of the ScrollStrategyOptions in OnInit:

export class AppComponent implements OnInit {
  scrollStrategy: ScrollStrategy;
  constructor(private keycloakService: KeycloakService,
              //...
              private historyDialog: MatDialog,
              private loginDialog: MatDialog,
              private loginDialogHelperService: LoginDialogHelperService,
              private readonly  scrollStrategyOptions: ScrollStrategyOptions) {}

  ngOnInit(): void {
      this.scrollStrategy = this.scrollStrategyOptions.noop();
  }

Then in the dialog configuration (MatDialogConfig) set the scrollStrategy property to this component variable

  • dialogConfig.scrollStrategy = this.scrollStrategy; :
  @HostListener('window:keydown.control.h', ['$event'])
  showHistory(event: KeyboardEvent) {
    if (!this.userIsLoggedIn) {
      const dialogConfig = this.loginDialogHelperService.loginDialogConfig('You need to be logged in to see the History Bookmarks popup');

      this.loginDialog.open(LoginRequiredDialogComponent, dialogConfig);
    } else {
      event.preventDefault();
      const dialogConfig = new MatDialogConfig();

      dialogConfig.disableClose = false;
      dialogConfig.autoFocus = true;
      dialogConfig.width = this.getRelativeWidth();
      dialogConfig.height = this.getRelativeHeight();
      dialogConfig.scrollStrategy = this.scrollStrategy;
      dialogConfig.data = {
        bookmarks$: this.userDataHistoryStore.getAllHistory$(this.userId),
        title: '<i class="fas fa-history"></i> History'
      };

      const dialogRef = this.historyDialog.open(HotKeysDialogComponent, dialogConfig);
      dialogRef.afterClosed().subscribe(
        data => {
          console.log('Dialog output:', data);
        }
      );
    }
  }

For the login required dialog, this option is injected via a service - const dialogConfig = this.loginDialogHelperService.loginDialogConfig('You need to be logged in to see the History Bookmarks popup');, but it follows basically the same principle:

@Injectable()
export class LoginDialogHelperService {

  scrollStrategy: ScrollStrategy;

  constructor(private readonly scrollStrategyOptions: ScrollStrategyOptions) {
    this.scrollStrategy = this.scrollStrategyOptions.noop();
  }

  loginDialogConfig(message: string) {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.scrollStrategy = this.scrollStrategy;
    dialogConfig.data = {
      message: message
    };

    return dialogConfig;
  }
}

Reference - https://material.angular.io/cdk/overlay/api#ScrollStrategyOptions


Shared with from Codever. πŸ‘‰ Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github β­πŸ™

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

Mongoose schema field from list of strings (enum)

Mongoose schema field from list of strings (enum) code snippet Continue reading

Set value of input field in angular template

Published on December 14, 2022

How to use jest test.each function

Published on December 14, 2022