Async pipe not working with Subject

angular rxjs subject-observer
AngularDebutant picture AngularDebutant · Jan 18, 2018 · Viewed 13.9k times · Source

I have the following BehaviorSubject in a service:

  isAuthenticated = new BehaviorSubject<boolean>(false);

And I am using it as follows in a component:

  authenticated: Observable<boolean>;

  constructor(private accountService: AccountService) { }

  ngOnInit() {
    this.authenticated = this.accountService.isAuthenticated.asObservable();
  }

And in the template I do something like :

  <li class="login-button" *ngIf="!authenticated | async">
    <a (click)="authenticate()">Log in</a>
  </li>
  <li *ngIf="authenticated | async">
    <a>Logged in</a>
  </li>

The issue is that I dont see any of the two li, although the assumption is that the first one should appear since I am assigning the initial value of the Subject to false.

What am I doing wrong?

Answer

pixelbits picture pixelbits · Jan 18, 2018

I suspect its the order of operations - you need parenthesis around your subscription: 

<li class="login-button" *ngIf="!(authenticated | async)">

Related questions

Subject and Observable, how to delete item, filter() list and next()

I have a list of songs setup with Subject and Observable (shown with | async in view), and now I want to delete a song off the list, do some filter() and call next() on the Subject. How and where do …

Read More
Angular Service with Subject Observable calling next() is not seen by Component subscriptions

I want to retrieve an updated object value (borrower) from an Angular Service. I've created an RxJS Subject in the Service so that multiple components can subscribe to it and get the updated value. When I subscribe to the Subject …

Read More
What is the difference between Promises and Observables?

What is the difference between Promise and Observable in Angular? An example on each would be helpful in understanding both the cases. In what scenario can we use each case?

Read More