angular ng if with async data?

Question

In my angular navbar I have a *ngIf for rather or not login/logout button should be showing

*ngIf="!authService.loggedIn()

it uses a service with this loggedIn function that returns true or false

  loggedIn() {
    return this.http.get('http://localhost:3000/users/validateToken')
      .map(res => res.json()).map(data => data.success);
  }

bu this is async, how I make my ngIf await it ? or how can I differently get the same result ?

Answer 1

You can use the async pipe since if request returns a observable.

*ngIf="!authService.loggedIn() | async"

Answer 2

Seems like

*ngIf="asyncfn() | async"

Only leads to an infinit loop, however:

constructor() {
  this.result = this.asyncFn();
}
public asyncFn() { // ... }

template:

*ngIf="result | async"

works fine... lovely Angular... how the heck would you defer it then to only done when needed? Does Angular team hate promises?