Ag-grid (Angular) Go FullScreen without breaking modals and other elements

README.md

Ag-grid (Angular) Go FullScreen without breaking modals and other elements

The problem

I was working with Ag-grid and Ng-zorro (Ant Design), and I needed to go set the data-table to full-screen mode, but I was having issues with the modals and other elements breaking. Modal not showing up, or dropdowns not working, etc.

I found a solution that worked for me, and I wanted to share it with you.

The solution

your-component.component.ts

 isFullscreen = false;

  fullscreen() {
    this.isFullscreen = true;
    // go fullsreen
    const elem = document.documentElement;
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    }
  }

  //Detect fullscreen mode changes
  @HostListener('document:fullscreenchange', ['$event'])
  handleFullscreen(event) {
    if (!document.fullscreenElement) {
      this.isFullscreen = false;
    }
  }

your-component.component.html

<button (click)="fullscreen()">Go Fullscreen</button>
<ag-grid-angular class="ag-theme-balham" [class.fullscreen]="isFullscreen" [gridOptions]="gridOptions"></ag-grid-angular>

your-component.component.scss

.fullscreen {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 1000 !important;
}

The explanation

The idea is to add a class to the ag-grid component when the user clicks on the button to go full-screen, and then remove the class when the user exits full-screen mode.