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?

Continue reading...