0
The error happens only when I try to open a dialog, where inside, requests happen inside onInit, when starting the application error does not appear.
ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.. Find more at https://angular.io/errors/NG0100
Angular 4
NgxSpinnerComponent_Template ngx-spinner.js:316
Angular 25
RxJS 5
Angular 27
CaixasLancamentosListaComponent_div_7_Template template.html:97
Angular 9
CaixasLancamentosListaComponent_Template template.html:90
Angular 23
RxJS 5
Angular 28
spinner Component
import { Component } from '@angular/core';
import { SpinnerService } from './services/spinner.service';
import { NgxSpinnerService } from 'ngx-spinner';
@Component({
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent{
constructor(
private spinnerService: SpinnerService,
private spinner: NgxSpinnerService) {
this.spinnerService.spinnerStatus.subscribe((status: boolean) => {
if (status === true) {
this.spinner.show();
} else {
this.spinner.hide();
}
});
}
}
service
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SpinnerService {
spinnerStatus = new EventEmitter<boolean>();
contagemCarregamentos = 0;
constructor() { }
alterarSpinnerStatus(valor: boolean) {
if (valor === false && this.contagemCarregamentos === 0) {
this.spinnerStatus.emit(valor);
} else if (valor === true) {
this.contagemCarregamentos = this.contagemCarregamentos + 1;
this.spinnerStatus.emit(valor);
} else {
this.contagemCarregamentos = this.contagemCarregamentos - 1;
if (this.contagemCarregamentos === 0) {
this.spinnerStatus.emit(valor);
}
}
}
}
html
<ngx-spinner bdOpacity="0.9" bdColor="rgba(97,96,96,0.76)" size="medium" color="#fff" type="ball-clip-rotate-multiple"
[fullScreen]="true">
<p style="color: white">Carregando Informações...</p>
</ngx-spinner>
I’ve tried using Viewafeterinit, Viewcontent, Afterviewchecked, Changedetectorref inside them, and I’m sure the problem is in the spinner, because if I remove, the modal opens without any problem, the issue is that to improve the user experience, I can not leave without spinner.
This is not really an error, it is usually shown in the console when it opens some component (modal for example), which has some service in it. For some reason Angular checks the component and recognizes that it has changed the state of some property in the component, so when the spinner removes the 'error' it disappears. I’ve noticed this behavior in Angular for a long time. But, you can rest assured that this is just a small problem in the Angular Runtime. I say this from experience, when I build the project and run on a server this 'error' does not appear.
– LeAndrade