button show or hide content - angular BehaviourSubject

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?

Continue reading...