angulartabsag-gridag-grid-ng2ag-grid-angular

Warning 'grid zero width' when using ag-Grid's sizeColumnsToFit() on two separate ag-Grids, displayed by a tab menu


Getting the warning below when resizing ag-Grid (change size of browser window) and switching between two tabs:

ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen?

I have reproduced the situation in a Stackblitz:

https://angular-jpmxjy.stackblitz.io/

Here is the composition of the test app:

You will see the warning error in chrome dev tools, when you resize the grid and switch between tabMenu 'Leverancer' and 'Delleverancer'.

You can see the code here:

https://stackblitz.com/edit/angular-jpmxjy

How do I remove this unwanted warning error?

enter image description here


Solution

  • These kind of errors usually mean that you have a memory leak in your application.

    After looking at your code I noticed how you subscribe to window:resize event

    window.addEventListener("resize", function () { ...
    

    You should know that this subscription will be still there even after component has been destroyed.

    You could write removeEventListener in ngOnDestroy hook. But for that you have to keep reference to original attached function. A better way would using dedicated Angular @HostListener decorator that will take responsibility for removeEventListener under the hook:

    @HostListener('window:resize')
    onResize() {
      if (!this.gridApi) return;
    
      setTimeout(() => {
        this.gridApi.sizeColumnsToFit();
      });
    }
    

    Forked Stackblitz

    To not repeat yourself you can create directive like:

    ag-grid-resize.directive.ts

    import { Directive, HostListener } from '@angular/core';
    
    @Directive({
      selector: '[ag-grid-resize]'
    })
    export class AgGridResizeDirective {
      private gridApi;
    
      @HostListener('window:resize')
      onResize() {
        if (!this.gridApi) return;
    
        setTimeout(() => {
          this.gridApi.sizeColumnsToFit();
        });
      }
    
      @HostListener('gridReady', ['$event'])
      onGridReady(params) {
        this.gridApi = params.api;
    
        params.api.sizeColumnsToFit();
      }
    }
    

    Now, all you need to add that behavior is to add attribute to your grid:

    <ag-grid-angular 
      ...
      ag-grid-resize       <============
    >
    </ag-grid-angular>
    

    Stackblitz Example