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

Question

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:

• PrimeNG p-tabMenu at the component: header.component
• ag-Grid at the components: delleverancer.component and leverancer.component.

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?

Answer 1

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