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

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();
  }