Mat-Dialog is not showing in fullscreen mode of browser

Question

I have a component viewImg which has three parts as follows:

1. Header
2. Main view area
3. Footer

The header has two action icons: delete and add . The main area displays an image along with some action buttons which are fullscreen , zoom-in , and zoom-out . And the footer has submit, save, and preview buttons.

On clicking delete icon a mat-dialog is opened which asks whether to delete the image or not. This works perfectly fine when I'm working in the normal flow. But as soon as I click on the fullscreen action button in the main area. This entire component goes into fullscreen mode with all the three components. Now, in this fullscreen mode if I click on delete icon, it doesn't show up the mat-dialog . But as soon as I exit the fullscreen mode, I can see that mat-dialog opened.

I want the mat-dialog shown in the fullscreen mode as well. Can someone help me with this?

Here is the code-snippets for my components:

viewImg Component (viewImg.component.html)

<div class="container" #container>
  <div class="header-row flex-row ai-center">
    <div class="title">HelloWorld.jpg</div>
    <div class="separator"></div>
    <mat-icon
      class="btn-icon"
      aria-hidden="false"
      aria-label="delete resource"
      (click)="$event.stopPropagation(); deleteScript()"
    >
      delete
    </mat-icon>
    <mat-icon
      class="btn-icon"
      aria-hidden="false"
      aria-label="add resource"
      (click)="$event.stopPropagation(); openGalleryDialog()"
    >
      add
    </mat-icon>
  </div>

  <div>
    <div class="resource-scroll-container">
      <div
        class="resource-scale-container flex-row ai-center jc-center"
        [style.transform]="'scale(' + zoom + ')'"
        [style.transform-origin]="zoom > 1 ? '0 0' : 'inherit'"
      >
        <div class="resource-view-port">
          <div class="resource-wrapper">
            <div>
              <img
                #image
                class="resource-image"
                [src]="resource.url"
                (load)="onImageLoad()"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="toolkit-wrapper" [class.hide]="hideImage">
      <app-main-view
        (action)="onToolkitAction($event)"
        [cropAreaDrawn]="cropAreaDrawn"
      ></app-main-view>
    </div>
  </div>

  <div class="action-button-row flex-row">
    <button mat-flat-button class="btn-primary">Preview</button>
    <button mat-flat-button class="btn-primary">Save</button>
    <button mat-flat-button class="btn-primary">Submit</button>
  </div>
</div>

viewImg Component (viewImg.component.ts) (I'm including the required functions here. Please let me know if you need any other.)

@ViewChild("container", { static: true }) containerElem: ElementRef;

//function to fullscreen the component
private _fullScreen() {
    this.containerElem.nativeElement.requestFullscreen();
}

private _removeFullScreen() {
    document.exitFullscreen();
}

//function to open up the delete dialog box
deleteScript() {
    const self = this;
    this.dialog.open(ConfirmDialogComponent, {
        data: {
            message: `Do you want to delete ?`,
            onConfirm: (cb) => {
                console.log("Deleted!");
                cb();
                self._changeDetectRef.detectChanges();
            },
            title: "Delete",
            trigger: this.containerElem,
        },
        autoFocus: false,
    });
    this._changeDetectRef.detectChanges();
}

Delete Confirm Dialog Component (ConfirmDialog.component.html)

<div class="confirm-dialog-content">
  <h2 *ngIf="data.title" mat-dialog-title>{{ data.title }}</h2>
  <mat-dialog-content>
    <ng-container *ngTemplateOutlet="data.contentTemplate || defaultContentTemplate">
    </ng-container>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button class="btn-rounded btn-secondary" mat-button [mat-dialog-close]="false">Cancel</button>
    <button class="btn-rounded btn-primary" mat-button (click)="proceed()">{{data.yesText || 'Confirm'}}</button>
  </mat-dialog-actions>
</div>

<ng-template #defaultContentTemplate> {{ data.message }} </ng-template>

Delete Confirm Dialog Component (ConfirmDialog.component.ts)

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

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.scss']
})
export class ConfirmDialogComponent {

  constructor(
    @Inject(MAT_DIALOG_DATA)
    public data: { message: string; title?: string; onConfirm?: Function, contentTemplate?, yesText?: string },
    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
  ) {}

  proceed() {
    if (this.data.onConfirm) {
      this.data.onConfirm(() => {
        this.dialogRef.close('confirm');
      })
    } else {
      this.dialogRef.close('confirm');
    }
  }

}

Please help me find out how to show delete dialog on click of delete in fullscreen mode.

Also, let me know if you need anymore information.

Thank you!

Answer 1

Fullscreen only dialogs container

Change this line this.containerElem.nativeElement.requestFullscreen(); by this.document.getElementsByClassName('cdk-overlay-container')[0].requestFullscreen();

The idea to only do fullscreen the required container; in this case, the dialogs are inside div with class cdk-overlay-container.

Original answer

Hi, you could found the answer on your viewImg.component.ts file on _fullScreen function.

Because you are asking for only the current dialog to go fullscreen, however, if you want other dialogs to go fullscreen too, you should request fullscreen from a container of both dialogs.

Change this line this.containerElem.nativeElement.requestFullscreen(); by this.document.getElementsByTagName('body')[0].requestFullscreen();

Here is a minimal working example (it should works if you open on a new tab, not inside stackblitz):

• open a new tab: https://angular-ivy-knyuq6.stackblitz.io/
• source code stackblitz: https://stackblitz.com/edit/angular-ivy-knyuq6?file=src/app/app.component.ts