Rows in angular ag grid are vanishing when data is filtered

My ag grid includes custom components for each column, but I'm facing an issue where the components disappear when filtering the data. For example: the component inside the row

To apply filtering, I use an input with a filtering function:

<data-grid [rowData]="filteredData(searchInput.query)"/>

The data-grid selector contains a standard ag-grid-angular component:

<ag-grid-angular 
    style="width: 100%; height: 350px;"
    class="ag-theme-alpine-dark"
    [rowData]="rowData"
    [columnDefs]="columnDefs" />

After filtering, the custom component inside the row disappears: no component

What could be causing this problem? Thank you in advance.

I expected the components inside the rows to remain visible after filtering, but so far, I haven't had any luck finding information on re-rendering in the documentation.

Answer №1

I suspect that the problem may be related to the filteredData(searchInput.query) function, however, a further analysis of the TypeScript files for these two components is necessary to understand the root cause.

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

Angular powered bootstrap modal with a clean and sleek design featuring a transparent header and background

Currently, I am utilizing an Angular-powered Bootstrap modal for a project. The modal content consists of an iframe that functions as a YouTube video player. My objective is to have the background colors of both the modal body and header be transparent, so ...

Retrieving attributes from a reactive object in TypeScript

I have a question regarding accessing values in Typescript. Whenever I load my website, I make a call to a service that fetches user data. private currentUserSource = new ReplaySubject<IUser>(1); currentUser$ = this.currentUserSource.asObservable ...

Pause and anticipate the occurrence of AdMob's complimentary video reward event within a defined function in Ionic/Typescript

In my ionic app, I have a function that determines if the user has watched a reward video to access another function: let canUseThisFunction = await this.someService.canUseFunction(); if(canUseThisFunction){ console.log("can use"); } else { cons ...

The error message "NullInjectorError: No provider for HTTP!" is generated by the ionic-native/http module

Currently working with ionic 3.2 and angular. To install the HTTP module (https://ionicframework.com/docs/native/http/), I used the following commands: ionic cordova plugin add cordova-plugin-advanced-http npm install --save @ionic-native/http In my scri ...

Leverage the power of a useRef hook to dynamically update a state value within React, even when the object is potentially

I'm running into an issue with the useRef hook, as I'm receiving the error "object is possibly null" when attempting to use it to set a stateful object. const jselectRef = useRef<HTMLButtonElement>(null) const [defaultHeight, setDefaultHeig ...

Angular 16 - ALERT! FirebaseError: The first argument passed to the collection() function must be either a CollectionReference, a DocumentReference, or FirebaseFirestore

While working on my Angular CRUD project with Firestore integration, I encountered an issue. Whenever I try to add a new object to the database, I receive the following error message: "ERROR FirebaseError: Expected first argument to collection() to be a Co ...

Expanding User Type to Include Extra User Data Using NextAuth.js

I encountered a dilemma where I needed to include the "profile" property in my section object to cater to different user personas in my application. However, despite retrieving the logged-in user's data from the backend and storing it in the NextAuth. ...

Tips on how to verify if the Angular test with native elements has produced an error

Is there a way to detect errors in an Angular test that uses native elements? The test I am running is as follows: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MikeComponent } from './mike.component&a ...

Guide on displaying and handling server-side validation errors within an angular form

I recently started working with Angular and encountered a problem I can't seem to solve. In my form, I need to display server validation errors from a Laravel REST API response. Although I can see the error message in the console, I'm unsure how ...

Exploring the Magic of Angular 5 Reactive Forms: Step-by-Step Guide to Dynamically Implement Validators and Displaying Errors upon Form Submission

My goal is to dynamically manage the required validator for form fields. It seems to be working fine when the user interacts with the field before submitting the form, as it validates onBlur and onSubmit. However, if a user submits the form without interac ...

Access to the 'currentUrlTree' property is restricted to the 'Router' class as it is marked as private and cannot be accessed externally

Currently, I am in the process of developing a login feature using jwt. However, I am encountering an error when attempting to retrieve the current URL of the active route as shown below. Error Message: [default] /Users/~/src/app/app.component.ts:51:75 P ...

Could you clarify the significance of the brackets in this TypeScript Lambda Expression?

I'm currently delving into an Angular book, but I'm struggling to locate any definitive documentation regarding the usage of square brackets in a lambda expression like [hours, rate]) => this.total = hours * rate. While I grasp that these para ...

What is the significance of the colon before the params list in Typescript?

Consider the following code snippet: import React, { FC } from "react"; type GreetingProps = { name: string; } const Greeting:FC<GreetingProps> = ({ name }) => { // name is string! return <h1>Hello {name}</h1> }; Wha ...

The Observable merge operation encountered an error: it cannot access the 'apply' property of an undefined value

I am currently working on setting up a sorted DataTable in an angular application, and while implementing it using this example, I encountered the following error: ERROR TypeError: Cannot read property 'apply' of undefined at TableDataSource ...

Creating a dual-element display in React within a single frame

My code looks like this: <Box> <SomeIcon/> <HightlightSearch query={query}> {text} </HightlightSearch> </Box> The HighlightSearch function uses innerHTML to highlight query results in the child (text). It's a simpl ...

Unable to attach to 'leafletOptions' as it is unrecognized as a property of 'div'

It seems like I keep encountering this problem, which is often resolved by adjusting import statements. Right now, my imports look like this: import { LeafletModule } from 'node_modules/@asymmetrik/ngx-leaflet'; import * as L from 'leaflet& ...

Avoiding data type conversion in JavaScript/TypeScript

Currently delving into the world of JavaScript, I come from a background of working with statically typed languages. Naturally, I opted to dive into TypeScript instead of starting directly with JS. While TypeScript is great and addresses many issues presen ...

Tips on adjusting the rotation speed of an Angular Material progress-spinner

For my web project, I have incorporated a material progress spinner. However, I am finding that it rotates at a very slow speed. Is there anyone who knows how to increase the rotation speed of this spinner? ...

Triggering an event from a component to its parent module resulting in an exception situation

Here is my app.component.ts code: import { Component, Input, OnInit, OnChanges, SimpleChanges} from '@angular/core'; import {Counter } from './counter' @Component({ selector: 'my-app', template: ` <custom-counter [ ...

Tips on updating primeng Panel Menu appearance with scss

I'm looking to customize the color of my panel menu to black. Below is the HTML code I am using. <p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu> ...