Encountering an ERROR with the message "Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError" while attempting to apply a filter to

My mat table includes a filter that utilizes chips to sort by multiple criteria.

Upon my initial attempt to filter and save the criteria, I encountered an error called ExpressionChangedAfterItHasBeenCheckedError. The error message indicates a transition from undefined to a number.

I came across several threads suggesting that I need to modify how I initialize the table and load data into it. I implemented ngAfterContentChecked() with this.ref.detectChanges(); which eliminates the error but does not fix the incorrect behavior.

The process starts with ngOnInit where I retrieve the data from a service.

How can I achieve the desired functionality?

Please refer to the attached code!

Thank you!

DetentionValidation.component.ts

[Code for DetentionValidation.component.ts]

DetentionValidation.component.html

[Code for DetentionValidation.component.html]
javascriptangulartypescriptangular-material-table

Answer №1

Referencing this Angular documentation

If you encounter the issue in ngAfterViewInit, it is advised to utilize a constructor or ngOnInit for setting initial values, or use ngAfterContentInit for other value bindings.

Therefore, you may attempt to

[...]
export class DetentionValidationComponent implements AfterContentInit {
   [...]
   ngAfterContentInit () {
      //place contents of your ngOnInit here
   }

In any case, this error is solely present during development and does not trigger additional checks or throw errors in production.

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

Tips for implementing <mat-progress-bar> in .ts file when making API service requests with Angular

I'm currently utilizing an API call to retrieve an image from a service, and I would like to display a progress bar while the image is being fetched. It seems that I need to incorporate the progress bar within the service as the image data is returned ...

angulartypescriptangular-material

Having trouble accessing the boolean value of a webComponent Stenciljs input checkbox within an Angular Reactive form

When using my stenciljs input checkbox component in Angular inside a reactive form, I encounter an issue where the value received is inverted and stored as a string rather than a boolean. The console.log output seems correct, but the form group value is ...

angularcheckboxstenciljs

tsc and ts-node are disregarding the noImplicitAny setting

In my NodeJS project, I have @types/node, ts-node, and typescript installed as dev dependencies. In the tsconfig.json file, "noImplicitAny": true is set. There are three scripts in the package.json file: "start": "npm run build &am ...

javascriptnode.jstypescript

When the promise is resolved, the members of the AngularJS controller are now

I'm experiencing some unexpected behavior in my controller when executing a certain method. The code snippet looks something like this: this.StockService.GetByInvoicesID(this.SelectedInvoice.ID).success((StockItems) => { this.StockItems = Stoc ...

angularjstypescript

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

javascripthtmlcss

Angular 2 Introductory Guide - where to find the necessary files

I recently began diving into Angular 2 and I am in the learning process. However, I encountered an issue after running the command: npm install -g angular-cli. The problem is that I cannot locate the following folder on my hard drive: src/app / ./src/app/a ...

node.jsangular

Unable to successfully link filter outcomes with input in AngularJS

Here is the code snippet I am working with: <body ng-app=""> <div ng-init="friends = [{name:'John', phone:'555-1276'}, {name:'Mary', phone:'800-BIG-MARY'}, {nam ...

javascriptangularjs

ESLint is indicating an error when attempting to import the screen from @testing-library/react

After importing the screen function from @testing-library/react, I encountered an ESLint error: ESLint: screen not found in '@testing-library/react'(import/named) // render is imported properly import { render, screen } from '@testing-lib ...

reactjstypescripteslintreact-testing-library

The Ins and Outs of Selecting the Correct Module to Attach a Controller in NestJS CLI

My experience with NestJS has been great so far, especially the Module system and how easy it is to parse requests. However, I have a question about the NestJS CLI. Let's say I have multiple modules. When I create a controller using the command "nes ...

typescriptnestjs

The use of $scope.$destroy may resolve memory leak issues, but it can also cause

In my TypeScript AngularJS application, I have a child directive that is dynamically generated. The template and controller are assigned at runtime based on the requirements of the situation, with multiple directives within the template. To display multipl ...

javascriptangularjsangular-directive

Is there a way to showcase the generated results on a graph after the user presses the submit button?

I've been working with to generate a bar chart. Currently, when the user clicks 'submit', the input numbers are shown in a graph on http://jsfiddle.net/jx9sJ/5/. Now, I want to make some changes. I am attempting to send the input numbers t ...

javascriptphpajax

Exploring the World of Three.js Loaders

I downloaded the file package three.js-dev from threejs.org and I am trying to use it in my project like this: <script type="text/javascript" src="./build/three.js"></script> <script type="text/javascript" src="./src/loaders/JSONLoader.js" ...

javascriptwebthree.jsloader

What is the process for importing a jquery plugin like turnjs into a React component?

After searching through countless posts on stackoverflow, it seems like there is no solution to my problem yet. So... I would like to integrate the following: into my react COMPONENT. -I attempted using the script tag in the html file, but react does no ...

javascriptjqueryreactjs

Is it possible for Angular.js to access a server session attribute?

I am in the process of creating an authentication system with angular.js My goal is to implement a session timeout after a period of inactivity and expire the current session if a user logs in from another device. In both scenarios - 1) idle timeout and ...

javascriptspringangularjssession

Koffi organized a collection of structured arrays

I am currently using koffi 2.4.2 in a node.js application from koffi.dev and up until now, everything has been running smoothly. However, I have encountered an issue with integrating a native C++ library method that requires a parameter struct defined as f ...

c++node.jstypescript

What's causing the unexpected rendering outcome in Three.js?

Here is a mesh created in Blender: https://i.sstatic.net/KBGM5.jpg Upon loading it into Three.js, I am seeing this result: https://i.sstatic.net/PCNQ8.jpg I have exported it to .obj format and ensured all faces are triangulated. I am not sure why this is ...

javascript3dthree.js

Resolving undefined in Ionic 4: Returning Data from Modal

I'm attempting to create a modal window that utilizes a radio group. When a user selects a value from the radio group, I want the modal to return the selected object. Here is the code for the radio group page and HTML: export class PopoverstationsPa ...

angularmodalviewcontrollerionic4

Tips for updating grid variables in Bootstrap 4 and Angular

What's the best way to truly override bootstrap variables? I've tried the following code but it's not working // overrides.scss @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; @import '~boo ...

angularvariablessassbootstrap-4

Is it possible to retrieve a JSON response by making a jQuery.ajax request to an appengine URL?

Attempting to retrieve response data via ajax from the following URL: http://recipesid.appspot.com/api.user?method=user.query&[email protected] Encountering issues when trying to run the code. Please assist in resolving this problem. $.ajax({ ...

javascriptjqueryajaxjsongoogle-app-engine

Node Selenium for Importing Excel Files---I will help you

My current challenge involves using node selenium in Firefox to click a link that triggers the download of an excel file. I want the downloaded file to be saved in a specific directory, but when I click the link, a dialog box pops up giving me the option ...

javascriptnode.jsseleniumselenium-webdriver