Don't understand the timing of {{binding}} in HTML

The way I prefer to handle this is to have authentication state stored in a service. The app component does something like this in its constructor:

authService.authenticationNotifier().subscribe((authed) => {
  if (authed) {
    this.rootPage = DashboardPage;
  } else {
    this.rootPage = LoginPage;
  }
});

The authenticationNotifier is a ReplaySubject with stack depth 1. Call next(true) on it when login succeeds, call next(false) on it to logout. No need for anybody else to be interacting with the navigation system.