Full screen mat-dialog

app.component.ts

/* This DOES NOT need to be in app.component.ts,
 * it can be anywhere, but for optimal performance the listener should probably only be added once
 */

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
    title = 'app';

    ngOnInit() {
        // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
        this.setVhCustomVariable();
        window.addEventListener('resize', this.setVhCustomVariable);
    }

    ngOnDestroy() {
        window.removeEventListener("resize", this.setVhCustomVariable);
    }

    setVhCustomVariable() {
        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
        let vh = window.innerHeight * 0.01;
        // Then we set the value in the --vh custom property to the root of the document
        document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
}

full-screen-dialog.scss

@media only screen and (max-width: 600px) {
    /* Refer to `opening.component.ts` to set this  */
    .mobile-full-screen {
        max-width: 100vw !important;
        height: 100vh; /* Fallback for browsers that do not support Custom Properties */
        height: calc(var(--vh, 1vh) * 100);
        min-height: 100vh;

        .mat-dialog-container {
            padding: 24px;

            .mat-dialog-title {
                height: 52px !important;
                margin: 0;
            }

            .mat-dialog-content {
                /* Apparently on some mobile browsers vh includes the height of the address bar
                 * see `app.component.ts` to set the --vh variable */
                max-height: calc((var(--vh, 1vh) * 100) - 152px);
                /* Values from default material styles
                 * Dialog Padding: 48px (24px top and bottom)
                 * Dialog Title: 52px (32px + 20px margin)
                 * Dialog Actions: 52px
                 * Total: 152px */
            }

            .mat-dialog-actions {
                min-height: 52px; // this is also the default from material
                padding: 0;
                align-items: flex-end;
            }
        }
    }
}

opening.component.ts

class OpeningComponent {
    constructor(private dialog: MatDialog) {}

    openFullScreenDialog() {
        this.dialog.open(YourComponent, {
            panelClass: "mobile-full-screen"
        });
    }
}