Expression ___ has changed after it was checked

Why is the component in this simple plunk

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message:string = 'loading :(';

  ngAfterViewInit() {
    this.updateMessage();
  }

  updateMessage(){
    this.message="all done loading :)"
  }
}

throwing:

EXCEPTION: Expression ‘I’m {{message}} in App@0:5’ has changed after it was checked. Previous value: ‘I’m loading 🙁 ‘. Current value: ‘I’m all done loading 🙂 ‘ in [I’m {{message}} in App@0:5]

when all I’m doing is updating a simple binding when my view is initiated?