Angular 2: используйте * ngIf с async

Есть две кнопки «Войти» и «Выход». Изначально видна только кнопка входа в систему. Но после аутентификации кнопка входа должна измениться на кнопку выхода. Но у меня это почему то не работает, как я могу это исправить?

html:

<div *ngIf = "!(authService.userSignedIn$ | async)">
     <button type = "submit" class = "btn btn-danger" data-toggle = "modal" data-target = "#exampleModal">
        Login
    </button>
</div>
<div *ngIf = "(authService.userSignedIn$ | async)">
    <button type = "submit" class = "btn btn-danger" (click) = "logOut()">Logout</button>
</div>

Component.ts:

export class InfoComponent implements OnInit {

  signInUser = {
    email: '',
    password: ''
  };

  @Output() onFormResult = new EventEmitter<any>();

  constructor(protected authService:AuthService, private router:Router) {

   }


  ngOnInit() {
  }


  logOut(){
    this.authService.logOutUser().subscribe(() => this.router.navigate(['/info']));
  }

  onSignInSubmit(){

    $('#exampleModal').modal('hide');

    this.authService.logInUser(this.signInUser).subscribe(

        res => {
          if (res.status == 200){
            // loginForm.resetForm();
            this.onFormResult.emit({signedIn: true, res});
            this.router.navigate(['/profile']);
          }
        },

        err => {
          console.info('err:', err);
          // loginForm.resetForm();
          this.onFormResult.emit({signedIn: false, err});
        }
    )

  }

}