MAT_DIALOG_SCROLL_STRATEGY - Javascript

The MAT_DIALOG_SCROLL_STRATEGY is a const that allows you to customize the scroll behavior when a dialog is opened or closed in Angular Material. It defines how the dialog should react when the user scrolls the content outside of the dialog.

By default, when a dialog is opened, Angular Material will scroll the dialog content if it is bigger than the viewport's height. If the user continues to scroll, then the viewport will scroll instead. However, you may want to modify this behavior, depending on your specific use case.

Usage

The MAT_DIALOG_SCROLL_STRATEGY is usually used in conjunction with the ScrollDispatcher service to control dialog scrolling behavior. You can import it from @angular/material/core and then use it in the dialog component's constructor.

Example:

import { MAT_DIALOG_SCROLL_STRATEGY, ScrollStrategy } from '@angular/material/core';

@Component({
  selector: 'app-dialog-example',
  templateUrl: './dialog-example.component.html',
  styleUrls: ['./dialog-example.component.scss'],
  providers: [{
    provide: MAT_DIALOG_SCROLL_STRATEGY,
    useFactory: (scrollDispatcher: ScrollDispatcher): () => ScrollStrategy => {
      return () => scrollDispatcher.scrollStrategies.block()
    }
  }]
})
export class DialogExampleComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<DialogExampleComponent>
  ) { }

  ngOnInit() {
  }

}

In this example, we are using the block scroll strategy from the ScrollDispatcher service. You can also use other available strategies, such as noop or reposition.

Conclusion

In conclusion, the MAT_DIALOG_SCROLL_STRATEGY const in Angular Material allows you to customize how dialog scrolling behavior works in your application. By using it in conjunction with the ScrollDispatcher service, you can control how the content within the dialog is scrolled when it exceeds the viewport size.