Update width or height of open Angular Material 2 dialog

5
votes

Is there a method to change the width (or height) of an open Angular Material 2 dialog?

The closest I got was getting a reference to the dialog and calling the updateSize method from within the dialog. Though I don't think the dialog reference method works in this way.

I use a dialog to capture and submit form data. Based on the response, success or error, the content within the dialog updates. It is at this point I would like to reduce the width of the dialog.

I have installed Angular v4.2.4 and Angular Material 2 v2.0.0-beta.12

Happy to provide additional information or code examples if needed. Or to consider a different approach.

2
angulardialogangular-material2

2 Answers

7
votes

I was on the right track. I just had the arguments wrong.

To update the width or height of an open dialog, you get a reference to the open dialog and call the updateSize method. The first parameter sets the width and the second parameter sets the height. Both are of type string.

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html'
})
export class MyDialogComponent implements OnInit {
    private shouldSizeUpdate: boolean;

    constructor(private dialogRef: MatDialogRef<MyDialogComponent>,
                @Inject(MAT_DIALOG_DATA) data: any) {
        this.shouldSizeUpdate = data.shouldSizeUpdate;
    }

    ngOnInit() {
        if (this.shouldSizeUpdate) this.updateSize();
    }

    updateSize() {
        this.dialogRef.updateSize("300px", "500px");
    }

}

And the code for further reference.

     /**
     * Updates the dialog's width and height.
     * @param {?=} width New width of the dialog.
     * @param {?=} height New height of the dialog.
     * @return {?}
     */
    MatDialogRef.prototype.updateSize = function (width, height) {
        if (width === void 0) { width = 'auto'; }
        if (height === void 0) { height = 'auto'; }
        this._getPositionStrategy().width(width).height(height);
        this._overlayRef.updatePosition();
        return this;
    };
4
votes

Have a look at the params avilable in MatDialogConfig which provides height, width, max-height, and max-width params. These params are passed as an object to the open method.

So you can do something like:

    let dialogRef = dialog.open(MyComponent, {
      height: '400px',
      width: '600px',
    });