ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

I need to change the value in the life cycle of the component, but when I do this error falls, what should I do?

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

app.component.ts

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  public value: boolean = true;
  public testValue = { value: true };

  public ngAfterViewInit() {
    this.value = false;
    this.testValue.value = false;
  }

}

app.component.html

value = {{value}} <br>
testValue.value = {{testValue.value}}

AppComponent.html:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
    at viewDebugError (errors.js:52)
    at expressionChangedAfterItHasBeenCheckedError (errors.js:28)
    at checkBindingNoChanges (util.js:127)
    at checkNoChangesNodeInline (view.js:547)
    at checkNoChangesNode (view.js:520)
    at debugCheckNoChangesNode (services.js:542)
    at debugCheckRenderNodeFn (services.js:486)
    at Object.eval [as updateRenderer] (VM303 AppComponent.ngfactory.js:12)
    at Object.debugUpdateRenderer [as updateRenderer] (services.js:463)
    at checkNoChangesView (view.js:363)

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-frgqqb?file=app%2Fapp.component.ts

Environment

Angular version: 5+

[trotyl]

<!-- Please search GitHub for a similar issue or PR before submitting -->

[NoMercy235]

ExpressionChangedAfterItHasBeenCheckedError is thrown when you try to modify a component’s state after the change detection algorithm ended.

Your issue is that ngAfterViewInit happens, as the name suggests after the change detection algorithm ended. At that point, Angular expects nothing else to change in the component’s state until the next tick. However, it does, because you set the value of the properties to false. You can’t something that would trigger a new change detection after a change detection has ended.

You can do those assignments in ngOnInit and Angular won’t complain.