NG0100: ExpressionChangedAfterItHasBeenCheckedError

Question

It shows these lines as the source of the problem, how can I solve this chronic problem?

product-html

product-ts

error-message

Product.html

<div *ngIf="showProductsDetail" #productDetailsElement>
    <mat-card appMaterialElevation class="product-details">
        <mat-card-header class="mt-3">
            <mat-card-title>
                <mat-icon><img class="details-icon" src="assets/icons/information.png" /></mat-icon
                >{{ "PRODUCTS.PRODUCT_DETAILS" | translate }}
            </mat-card-title>
        </mat-card-header>

Product.ts

ngAfterViewInit(): void {

    const filterValue = "";

    this._store$.dispatch(new OnlineProductsStoreActions.GetOnlineProducts(this.filter));
    this._store$.dispatch(new OnlineProductsStoreActions.SearchProduct(filterValue, this.filter));
    this._store$.dispatch(new OnlineProductsStoreActions.HomePageCategory());

    this.onlineproductsEffects.getOnlineProductsHomePageCategory$
        .pipe(
            filter((action) => action.type === OnlineProductsStoreActions.ActionTypes.HOME_PAGE_CATEGORY_SUCCESS),
            takeUntil(this.destroyed$)
        )
        .subscribe((res) => {
            console.log(res);
            this.SelectHomePageCategories = res;
        });

I can't find what changed...

Answer 1

Ensure that there are no changes to the bindings in the template after change detection is run. This often means refactoring to use the correct component lifecycle hook for your use case. If the issue exists withinngAfterViewInit, the recommended solution is to use a constructor or ngOnInit to set initial values, or use ngAfterContentInit for other value bindings.

check if you can move some of that code to the ngOnInit method