how to bind app.service property to the view? #474

Hi, I'm trying to use app.service to get/set global loading state.
in app.html I print the loadState, {{loadState}} which supposed to be bound to appState.get().loadState

<div class="app-inner">
  loading : {{loadState}}
  <header></header>
  <main layout="column" layout-fill>
    <router-outlet></router-outlet>
  </main>
</div>

app.ts

export class App{

  constructor(public appState: AppState) {
    this.appState.set('loadState', false);  //initial value.
  }
  get loadState() {
    return this.appState.get().loadState;
  }
}

however I'm getting this error: EXCEPTION: Expression 'loading: {{loadState}} in App@0:23' has changed after it was checked. Previous value: 'false'. Current value: 'true' in [loading: {{loadState}} in App@0:23]

the error is clear, but I can't figure out how to fix it? am I using app.service the wrong way?