Have a observable value update on a html file

Question

So i have an Observable lets name it obsVar in my component.ts file. I have a button in my appcomponent.html file i.e.

<button *ngIf="obsVar | async"> MyButton </button>

Now the problem is that if the value for obsVar changes from True to False or viceversa, the change isnt reflected in my page automatically, maybe its something to do with angular and how it saves computation time by not reloading it again

I tried a couple hacks like making another button which would reload the value of this variable by using a original fixed variable

ex:

originalVar: Observable<Boolean> = getMyValue();

reloadVar() {
this.obsVar = this.originalVar;
}

suppose the original value is false and i have a button which changes the obs variable value to True at the source and also triggers this function(reloadVar) simultaneously, it doesnt change the value because of the time difference for the actual change to propogate. It works if i click the button 2 or 3 times though. Any way to do it faster or automate this process so that whenever the obs var changes the change is automatically done on the angular html side too.

Answer 1

So basically you want to have this:

isVisible = true;
behaviorSubject$ = new BehaviorSubject<boolean>(this.isVisible);

public get isVisible$(): Observable<boolean> {
  return this.behaviorSubject$.asObservable();
}

public toggle() {
  this.isVisible = !this.isVisible
  this.behaviorSubject$.next(this.isVisible);
}

And then in your HTML file:

<button *ngIf="isVisible$ | async">MyButton</button>
<button (click)="toggle()">Toggle</button>

Or without Observable:

isVisible = true;
public toggle() {
    this.isVisible = !this.isVisible
}

<button *ngIf="isVisible">MyButton</button>
<button (click)="toggle()">Toggle</button>