Angular users should be cautious of the 'grid zero width' warning that may arise when employing ag-Grid's sizeColumnsToFit() on multiple ag-Grids simultaneously

I'm encountering an issue with ag-grid where I see the following warning in the console. Despite conducting some research, none of the solutions I found have resolved my problem. It appears that there may be a memory leak within my application based on information from Angular Material, but I am unable to pinpoint the exact cause.

ag-Grid: attempted to execute sizeColumnsToFit() while the grid is returning zero width. Could it be that the grid is not yet visible on the screen?

Please,

If you have any insights on how to address this issue or if you spot any errors in my code, even the smallest assistance would be greatly appreciated.

Here's what I've tried:

@HostListener('window:resize')
onResize() {
  if (!this.gridApi) return;

  setTimeout(() => {
    this.gridApi.sizeColumnsToFit();
  });
}

Or perhaps this solution might help:

 afterGridReady() {
    if (this.language === 'en') {
      this.appgrid.columnApi.setColumnsVisible(['name'], true);
      this.appgrid.columnApi.setColumnsVisible(['nameCZ'], false);
    } else {
      this.appgrid.columnApi.setColumnsVisible(['nameCZ'], true);
      this.appgrid.columnApi.setColumnsVisible(['name'], false);
    }
    this.api.sizeColumnsToFit();
    window.addEventListener('resize', function () {
      setTimeout(function () {
        this.api.sizeColumnsToFit();
      });
    });
  }

Thank you in advance.

Answer №1

To detect changes in tab selections, you can utilize the selectChange event provided by a certain library. This event is triggered whenever there is a change in the selected tab. According to the documentation:

@Output() selectChange : Event emitted when the tab selection has changed.

Here's how you can implement this in your template:

<md-tab-group (selectChange)="tabSelectionChanged($event)">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">
    This tab will load additional content after 5 seconds.
    <p>{{ moreContents }}</p>
  </md-tab>
</md-tab-group>
... and in your TypeScript code:

tabSelectionChanged(event){
    // Retrieve the selected tab
    let selectedTab = event.tab;
    console.log(selectedTab);

    // Execute a specific method 
    this.someMethod();
}

Answer №2

This code snippet demonstrates the implementation of a tab group in Angular Material, with two tabs: "Letter Template" and "Template Gallery". The selectedTabChange function handles tab changes by updating the seletedTab property accordingly.

//component.html

 <mat-tab-group (selectedTabChange)="selectedTabChange($event)">
            <mat-tab label="Letter Template">
                 <div class="ag-grid-full-height">
                     <ag-grid-angular style="width: 100%;height:100%" id="myGrid" class="ag-theme-balham"
                        [pagination]="true" [columnDefs]="columnDefs" [rowData]="rowData" [animateRows]="true"
                        [sideBar]="sideBar" (gridReady)="onGridReady($event)" [suppressMenuHide]="true">
                    </ag-grid-angular>
                </div>
            </mat-tab>

            <mat-tab label="Template Gallery">
                <app-template-gallery *ngIf="seletedTab"></app-template-gallery>
            </mat-tab>

        </mat-tab-group>

   //component.ts     
   seletedTab;

  selectedTabChange(event) {
    let tab = event.tab;
    console.log("tab seleted", tab);
    this.seletedTab = tab.textLabel;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you conduct testing on Jest tests?

I am in the process of developing a tool that will evaluate various exercises, one of which involves unit-testing. In order to assess the quality of tests created by students, I need to ensure that they are effective. For example, if a student provides the ...

"Encountering an unexpected error when Dockerizing an Angular App on Win10 Professional: EXPAND-ARCHIVE instruction not

I need to create a docker image for an Angular web application and deploy it on a Windows machine. However, I'm running into an issue when executing the command: docker build -t node . The following exception is thrown: Error response from daemon: ...

When utilizing @Input to handle received data, encountering the error message 'Property '...' doesn't exist on type FirebaseObjectObservable<any>' is common

I am facing an issue with data delivery in a child component through @Input. The data is successfully console.logged, but when I try to work with it, I encounter an error stating that the objects I am trying to access do not exist on type FirebaseObjectObs ...

Using React-Router-Native to send an image as a parameter

I am encountering an issue while attempting to pass an image as a parameter in react-router-native and retrieve the data from location.state. Typically, I use the following code to display an image: import Icon from '../image/icon.png'; <Vie ...

What is the best way to set up an endpoint in Angular for image uploading?

Using the Kolkov Angular editor in my Angular application, I have successfully created a rich text editor. Currently, I am looking to upload images from the editor to the server. I already have a function in place that takes a file as an argument and send ...

Exploring the Potential of Jest Testing for Angular 6 Services

Hey there, I seem to be facing a bit of a roadblock and could use some assistance. Here's the situation - I'm trying to test a service using Jest, but all the tests pass without any issues even when they shouldn't. Here are the details of t ...

Error message: Unable to instantiate cp in Angular 17 application while building with npm run in docker container

After creating a Dockerfile to containerize my application, I encountered an issue. When I set ng serve as the entrypoint in the Dockerfile, everything works fine. However, the problem arises when I try to execute npm run build. Below is the content of my ...

Ensuring Type Compatibility Between Classes and Object Literals in TypeScript

When working with TypeScript, it is important to note that an object literal can be assigned to a class typed variable as long as the object provides all properties and methods required by the class. class MyClass { a: number; b: string; } // The co ...

Combining Angular (client-side) and Node.js (server-side) applications into a single package

In my project, I am constructing a front-end application using Angular 8, along with a backend Node.js web application using the Express framework. The Express-based server-side web app will offer a REST API to be used by the Angular app, which may also in ...

How can I create a custom validator in Angular 2 that trims the input fields?

As a newcomer to Angular, I am looking to create a custom validator that can trim the input field of a model-driven approach form. However, I have encountered difficulties during implementation. When attempting to set the value using setValue() within th ...

Harnessing the power of Angular reactive forms to bind a customizable intricate field

I'm trying to integrate a custom multiselect typeahead dropdown component with reactive form groups in my project. I want to bind it to a form control similar to how mat-form-fields work, but I'm unsure of the configuration required for this. fi ...

What is the best way to set up initial state in react-native-day-picker?

I have been experimenting with implementing react-native-calendar into my project. Here is the code snippet I am working on: import React from 'react'; import {Calendar} from 'react-native-day-picker'; const MyCalendar = () => { ...

Managing numerous subscriptions to private subjects that are revealed by utilizing the asObservable() method

I'm using a familiar approach where an Angular service has a private Subject that provides a public Observable like this: private exampleSubject = new Subject<number>(); example$ = this.exampleSubject.asObservable(); In my particular situation, ...

The text inside angular spans mysteriously vanishes

I have encountered an issue while working on my Angular Project. Previously, the <span> elements were displaying their contents without any problems. However, now I am facing an issue where the contents of <Span> elements are not visible. For ...

What could be causing my website to lose its responsiveness after linking a domain?

Recently, I created a basic website for an event in my town using AWS Amplify from Amazon. Initially, the website was hosted without a custom domain and had a random URL. It worked well on both web and mobile platforms. However, after connecting a custom d ...

What is the process for developing a custom pipe in Angular 12 with ngx-translate and internationalization support?

I've been working on internationalization for my angular project, which is an admin portal using @ngx-translate. Unfortunately, I've hit a roadblock and need to start over with the internationalization task. Any suggestions on how to approach thi ...

Issue: Angular Application experiencing failure during NGCC operation execution

As I work on my Angular Application in VS Code, I keep encountering popups when opening the application. Despite this, the 'ng serve' command functions properly and successfully runs the app. However, I am noticing an error in the console with t ...

Stopping HTTP client calls in OnDestroy hook of an Angular Service

Is it possible to automatically unsubscribe from an http call in an Angular service using the ngOnDestroy hook? Just to note, I am already familiar with using the rxjs 'take' operator or manually unsubscribing from the service within the compone ...

Creating a unique directive to customize the height

I'm currently working on a directive called appHeaderResize, which is designed to calculate the height of both the <app-online-header> component and the <app-navigation> component. Below is the code snippet: <div class="sticky" appHe ...

What could be triggering the "slice is not defined" error in this TypeScript and Vue 3 application?

I have been developing a Single Page Application using Vue 3, TypeScript, and the The Movie Database (TMDB) API. In my src\components\MovieDetails.vue file, I have implemented the following: <template> <div class="row"> ...