Data Binding causes ExpressionChangedAfterItHasBeenCheckedError

I'm new to Angular 4. I have a data binding field like below. But somehow, there is an ExpressionChangedAfterItHasBeenCheckedError.

<form>
<div>
  <h2>Hello {{input.value}}</h2>
  <input type="text" [value]="input.value" name="inputTest"/>
  <input type="text" #input [value]="name"/>
</div>
<button type="submit">submit</button>
</form>

Below is a simple constructor:

export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

I read a lot of posts about the error, I still don't understand why a simple data binding will cause the error.

I tried below code, but doesn't work.

ngAfterViewInit() {
    console.log("ngAfterViewInit");
    this.cd.detectChanges();
}

Please help!!

Please refer the plunker: https://plnkr.co/edit/16atvKgf2BA6z2OjqT6h?p=preview