button show or hide content - angular BehaviourSubject

Question

I have a button, that on every click should display or hide content

HTML:

<button (click)="showHide()">
    {{ content$ ? 'Hide'  : 'show'  }}
</button>
<div *ngIf="content$" >
    CONTENT
</div>

TS:

readonly content$ = new BehaviorSubject<boolean>(false);
showHide(): void {
    this.content$.next(true);
}

and this code does not give any error, but it always displays content and I cannot hide it, any help?

Answer 1

You are correctly set a new value into the BehaviorSubject, and with: *ngIf="content$"you are just checking that BehaviorSubject exists.

In order to get the content you have to:

<div *ngIf="content$ | async; let content">
  CONTENT
</div>

With let content you can access to your subject's value, in case you have to ;)

You can have more information about on AsyncPipe doc