Issue
I would like to control backdrop visibility from the dialog itself.
Ideally it would be to have it implemented like this, but there is no way (at least I didnt find it) to control backdrop from dialogRef:
export class MyDialogComponent {
constructor(
public dialogRef: MatDialogRef<ServiceCaseFloatingEditorComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) {}
changeBackdropVisibility(){
this.dialogRef.hasBackdrop = !this.dialogRef.hasBackrop;
}
}
any idea how to deal with it?
Solution
I created default class:
DialogComponent:
public static DEFAULT_CONFIG: MatDialogConfig = {
hasBackdrop: true,
backdropClass: FLOATING_EDITOR_BACKDROP_CLASSNAME,
};
Outside usage:
this.editorDialogRef = this.dialog.open(DialogComponent, {
...FloatingEditorComponent.DEFAULT_CONFIG
}
then to toggle backdrop in DialogComponent :
ngOnInit(){
this.backdrop = document.querySelector(`.${FLOATING_EDITOR_BACKDROP_CLASSNAME}`);
}
private showBackdrop(): void {
if (this.backdrop) {
this.backdrop.style.display = 'block';
}
}
private hideBackdrop(): void {
if (this.backdrop) {
this.backdrop.style.display = 'none';
}
}
Answered By - Mateusz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.