Angular 15 - View not updating after BehaviorSubject emmits change

Question

I have a service with a BehaviourSubject which I can subscribe to from any component:

// getter in service
public get myObs$(): Observable<any> {
  return this._myBhvSub$.asObservable()
}

Then in the component I do

ngOnInit(): void {
  this.myService.myObs$.subscribe(res => {
    this.myVar = res
    console.log("My Var", this.myVar)
  })
}

concole.log() shows the data !! myVar is getting its value correctly !!

Finally HTML

<div>{{myVar.someKey}}</div>

This view just won't show the data 😣😣😣

I also tested hardcoding MyVar like this:

ngOnInit(): void {
  this.myService.myObs$.subscribe(res => {
    this.myVar = {someKey: "Hello World"}
    console.log("My Var", this.myVar)
  })
}

...and this works just fine 😒

What am I doing wrong? 😭😭😭

Answer 1

can you try this:

 <div>{{(myService.myObs$ | async).someKey}}</div>

N.B : make myService public

if async pipe work it mean you have onPush detection in your component or parent component