DEV Community

Cover image for Do nothing on Angular material dialog scrolling
Adrian Matei for Codever

Posted on β€’ Edited on β€’ Originally published at codever.dev

3 1

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();
  }
Enter fullscreen mode Exit fullscreen mode

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);
        }
      );
    }
  }

Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode


Reference -

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


Shared with ❀️ from Codever. Use πŸ‘‰ copy to mine functionality to add it to your personal snippets collection.

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

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

Top comments (0)

πŸ‘‹ Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay