Error: ExpressionChangedAfterItHasBeenCheckedError: Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'

Question

I have reproduced the issue on StackBlitz with minimal code.

Step 1: Click on the text

Step 2: Focus on the text field

Step 3: Type enter and check the console for this error

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.

Answer 1

You have to manually trigger change detection in the directive using the detectChanges() method of the ChangeDetectorRef

Modify editable-on-enter-inplace.directive.ts like this:

import { Directive,HostListener ,ChangeDetectorRef} from '@angular/core';

 constructor(private editable: EditableInplaceComponent,private cdr: ChangeDetectorRef) { }

  @HostListener('keyup.enter')
  onEnter() {
    this.editable.toViewMode();
    this.cdr.detectChanges();
  }

Answer 2

I was wondering why this error comes out, and for a simple answer it was related to calling the same import element several times in different components and also in the `app.module.ts.

The error comes when following a modal example Modal Example using ng-bootstrap.

I solved the issue by simply calling it within a service, for using it along all the application.

Calling In app.module.ts.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Calling In app.mycomponent.ts.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

To resume, the error pop when calling the import in different components of my application.