is it possible to set different height and width for a dialog in Angular material Design Angular 5

2
votes

I am working in an angular 5 application ,In this application for login purpose I have a Angular Material Design popup .

I have the following process in the dialog screen .

checking user mail if it's new signup form will be enabled or password field will be enabled.

So Initially I have the dialog height and width as 100 * 100 for the email input

If the user not exist the signup form will be enabled for that I want to set the height and width as 300*100

If user already exists then password field will be enabled along with email input for that i want to set 200 * 100

I am new to this so I could not find a solution also searched on SO can't solve it .

 myAccountClick(event) {

        const dialogScreen = this.dialog.open(MyaccountComponent,{height:'100px',width:'100px'});

    }

can anyone help me to solve this .

1
angulartypescriptangular-material
can't you initially check those conditions, and then in each cases pop up 3 different dialog? – Viran Malaka
I already think about having 3 dialog ,but I want to know that if there is any other way to do that ...@ViranMalaka – Zhu
Or when the condition changes, just close the dialog and reopen the dialog with different size and prefilled data – Yousef khan

1 Answers

5
votes

Within your dialog's component you can inject MatDialogRef and call its updateSize method to change the height/width according to your needs.

Check an example here