logo
down
shadow

Creating Angular4 'Loading' Screen: ExpressionChangedAfterItHasBeenCheckedError


Creating Angular4 'Loading' Screen: ExpressionChangedAfterItHasBeenCheckedError

By : Rakesh Nandi
Date : November 21 2020, 03:00 PM
fixed the issue. Will look into that further ngAfterViewInit is exactly what gives you trouble. It is called after view has been updated with all values bound to it. So, at this moment you really should not change any data used in bindings. This also means that avoiding this error is pretty simple: all you need to do is just to wait for another change detection cycle. Simplest solution is to set timeout:
code :
ngAfterViewInit() {
    setTimeout(() => {
        dataservice._isLoading = false;
    });
}


Share : facebook icon twitter icon
Angular dynamic component loading - ExpressionChangedAfterItHasBeenCheckedError

Angular dynamic component loading - ExpressionChangedAfterItHasBeenCheckedError


By : Gopalakrishnan
Date : March 29 2020, 07:55 AM
will help you This is because you are altering component state in ngAfterViewInit. See the issue here discussing the behavior.
In your case you can move the initial creating in ngOnInit.
code :
 ngOnInit() {
    this.loadComponent();
    this.getAds();
 }
Angular4 Change Detection ExpressionChangedAfterItHasBeenCheckedError

Angular4 Change Detection ExpressionChangedAfterItHasBeenCheckedError


By : DisplayName=
Date : March 29 2020, 07:55 AM
should help you out I found a solution that I can live with.
You can inject the "parent" into your component (similar to require in AngularJS).
code :
<div
    class="item-row"
    (click)="onToggleDetail()"
>
    <div class="cell">...</div>

    <div *ngIf="isLoading" class="loading"></div>
</div>

<div
    *ngIf="isExpanded"
    [hidden]="!isInitialized"
    class="detail-row"
>
    ...
</div>
import { Component } from '@angular/core';
import { Input, ChangeDetectorRef } from '@angular/core';

@Component({...})
export class MyItemRowComponent {
    ...

    isInitialized: boolean = false;
    isLoading: boolean = false;
    isExpanded: boolean = false;

    constructor(private changeDetector: ChangeDetectorRef) { }

    onToggleDetail() : void {
        this.isExpanded = !this.isExpanded;
    }

    public startLoading() : void {
        this.isLoading = true;
        this.isInitialized = false;

        this.changeDetector.detectChanges(); // trigger re-evaluate
    }

    public stopLoading() : void {
        this.isLoading = false;
        this.isInitialized = true;

        this.changeDetector.detectChanges(): // trigger re-evaluate
    }
}
import { Component } from '@angular/core';
import { Input, Host, Optional } from '@angular/core';

import { MyItemRowComponent } from '...';

@Component({...})
export class MyComponentComponent {
    ...

    // Optional, because there may be a case where we want to use it outside of a row
    constructor(@Optional() @Host() private parent: MyItemRowComponent) { }

    ngOnInit() { // or ngAfterViewInit, doesn't matter
        if (this.parent) {
            this.parent.startLoading();
        }

        setTimeout(() => { // simulate API call
            if (this.parent) {
                this.parent.stopLoading();
            }
        }, 2000);
    }
}
Angular4/ngrx - ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Angular4/ngrx - ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked


By : Justo Barrios
Date : March 29 2020, 07:55 AM
this one helps. this error comes from the fact that a variable has been checked during the lifecycle of Angular, and that you tried to change it once the lifecycle has ended.
This is very common and usually the error isn't reproduced in production mode.
Angular4 router-outlet activate and ExpressionChangedAfterItHasBeenCheckedError

Angular4 router-outlet activate and ExpressionChangedAfterItHasBeenCheckedError


By : mill996
Date : March 29 2020, 07:55 AM
Any of those help I am trying to update the status of some buttons. Basically there are 3 steps (1, 2 and 3) When on step one, all steps have not been visited. When on step 2, step 1 has been visited, when on step 3, step 1 and 2 have been visited and when on the results page, all steps have been visited. , you can put some of you logic inside setTimeout function for i.e
code :
    changeLinkState() {
      var url = this._router.url;
      setTimeout(()=>{
      if (!this.visited) {
        this.visited = {
          one: false,
          two: false,
          three: false
        };
      }
      switch (url) {
        case '/steps/one':
          this.visited.one = false;
          this.visited.two = false;
          this.visited.three = false;
          break;
        case '/steps/two':
          this.visited.one = true;
          this.visited.two = false;
          this.visited.three = false;
          break;
        case '/steps/three':
          this.visited.one = true;
          this.visited.two = true;
          this.visited.three = false;
          break;
        default:
          this.visited.one = true;
          this.visited.two = true;
          this.visited.three = true;
          break;
      }

      console.log(this.visited);
      })
    }
Angular loading button ExpressionChangedAfterItHasBeenCheckedError

Angular loading button ExpressionChangedAfterItHasBeenCheckedError


By : user2077202
Date : March 29 2020, 07:55 AM
Any of those help Here is the issue with variable loading which is being changed while Change Detection has been trigger. To avoid this error set the value of loading in separate thread.
code :
  ngOnInit() {
    this.loadingService.onLoadingChanged.subscribe(isLoading => 
       Promise.resolve(null).then(() => this.loading = isLoading)
    );
  }
Related Posts Related Posts :
  • how do i handle POST response
  • constructor being called duplicate in *ngFor due to @ViewChild
  • Angular4 OAuth2 IdentityServer4
  • ERROR TypeError: Cannot read property 'name' of undefined
  • Angular4 http get with URL parameter
  • What is the difference between fakeAsync's tick() and done() in angular2 testing?
  • How to push in service without losing previous data?
  • How to make custom arrow mark in agm-map?
  • Upload File in Angular 4 using FormData works in Local but not on Azure App Service
  • How to automatically deploy a Laravel app with embedded Angular to Heroku
  • Unexpected module 'Ng2SmartTableModule' declared by the module 'AppModule'
  • use angular-cli project with visual studio asp.net empty web app?
  • How to load different templates for the same component?
  • How to pass a array value as color in Angular 4
  • Coerce the HttpResponse into an item of the specified type, complete with custom methods
  • Angular/rxjs: Why don't I have to import toPromise anymore?
  • Angular 2 @Input not works for router outlet
  • Nested Model - Angular 2
  • Supress duplicate error in aot compiler
  • Angular2 ExpressionChangedAfterItHasBeenCheckedError
  • Consuming my promise inside my Angular component
  • Despite error cannot read property length of null, the code works
  • Accessing data returned by Promise.all
  • How to add background image with ngStyle?
  • Property X doesn't exist on type Y[]
  • Ionic Headers Failing to set through http.post
  • Angular 4 routing/state problems
  • Angular 2 Dashboard application web api call at initialization
  • ngrx/store:subscribe works fine but async in template gives [object Object]
  • Angular2 - how to mix custom and declared arguments in constructor
  • Implementing Geolocation from @ionic-native/geolocation
  • Angular - Test library before publish
  • AoT Compilation Failed - no such file or directory, lstat 'tsconfig-aot.json'
  • Docker container from Angular4 app : "-p" : executable file not found in $PATH
  • Invalid container name
  • Angular - NgStyle fall back image
  • Angular Observable not updating when I subscribe.
  • Angular mat-checkbox getElementById
  • Angular 4 Injecting route in the APP_INITIALIZER
  • Error: EACCES: Error: EACCES: permission denied, open '/Users/emilio/.ionic/daemon.log' at Error (native)
  • selected value in dropdown list does not work Angular
  • how to smooth scroll down to element on page load angular 4?
  • AngularFire update breaks the app
  • experimentalDecorators Warning on ts lint
  • Dexie - Check if a record exists and initialize it if not present
  • How should I use BehaviorSubject class from a Service in the HTML Template of a Component in Angular 4?
  • How to make ngx-bootstrap datepicker be able to select and display only month and year?
  • What is wrong with this Angular form that makes it reset selected values in the UI unexpectedly?
  • Angular change Interface definition when I use as with promise
  • Angular 4 dynamic headers based on user type
  • Test HTTPClient Angular 4 "Expected undefined to be defined"
  • Angular 4 Animations add parameters
  • Angular 2 - forcing API return to follow interface types
  • Ionic Page with inputs super slow
  • Angular: How to subscribe to @Input changes
  • sending data from directive to component in angular4
  • Unable to populate Chartist with data from http get (Angular 4)
  • append default headers to each get/post/put/delete request via hacking the net/BaseRequestOptions
  • Is ng-bootstrap importing all the components
  • Add onclick event on svg rect using Angular Renderer2
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org