How do I pass in Angular mat dialog box width and height?

Question

I have this Mat dialog box in Angular and I understand I should pass in the styles for width and height alongside that object but I can't manage to figure out how, it keeps throwing errors. Or is there any other way to set width and height? Thank you

let dialogRef = this.dialog.open(GroupChooseComponent, {data: {variant} });

score 3 · Answer 1 · answered Mar 23 '21 at 15:48

3

You can add width or height like this according to latest version of Angular Material.

let dialogRef = this.dialog.open(GroupChooseComponent, {
    width: '500px',
    height: '500px'
});

answered Mar 23 '21 at 15:48

Girish Agarwal

81
4

score 0 · Answer 2 · answered Mar 23 '21 at 15:32

solution 1

you can't change the height or width because the library fixes the size based on { lg, sm, md } that's my code ( in my project ), it works for me, you can follow the similar like that

this.modalRef = this.modalService.open(UploadUserComponent, { size: 'lg' });

Solution 2

You can create individual css file to customize the style width or height like you want.

How do I pass in Angular mat dialog box width and height?

2 Answers2