[Angular] Material Ui Dialog 사용 시 cdk-global-scrollblock 제거하기

문제

Material Ui의 Dialog 모달창 클릭 시 뒤의 내용이 사라지는 현상이 있었다. 

 

원인

cdk-global-scrollblock 클래스가 html엘리먼트에 삽입되어 position: fixed 가 되기 때문임을 알게되었다.

 

해결방법

Dialog에 사용할 scrollStrategy 추가

const dialogRef = this.dialog.open(DialogComponent, {
        width: '250px',
        data: data,
        scrollStrategy: new NoopScrollStrategy()
    });

scrollStrategy를 NoopScrollstrategy로 설정해주기

import { NoopScrollStrategy } from '@angular/cdk/overlay';

 

 

참고 https://stackoverflow.com/questions/47782890/angular-material-dialog-component-hides-all-my-website-components