Why doesn't my Angular component value update?

Issue

component1.html :

<div>
    {{nums}}
</div>

TS:

nums: Array<number> = [0, 1, 2, 3]; 

ngOnInit(): void {
    this.numService.getNum().subscribe((res) => {
    this.num = res;
  });
}

component2.html:

<div (click)="addNum()">
  Add
</div>

TS:

addNum(): void {
  this.numService.addNum(6);
}

NumService:

public getNum() {
    return of(this.nums);
  }
  public addNum(num) {
    this.nums.push(num);
  }

Why when i click on addNum, in component1 doesn't work subscribe and value doesn't change. How to do it properly on this example?

Solution

you are facing two problems:

1. Every time you call the service function numService.getNum() you are creating a new observable.
2. The function of creates a special observable which only emits its value once.

Instead you should have your service maintain a single observable, preferably a ReplaySubject (so it retains the previous value for subscriptions)

something like this should work, in your service:

  nums$ = new ReplaySubject<int[]>([]);
  nums = []

  public addNum(num) {
    this.nums.push(num);
    this.nums$.next(this.nums)
  }

then from your component, you should not subscribe (to avoid the usual observable memory leak), but expose the service's observable:

  numsAtComponent$ = this.numService.nums$

And finally from your template, you subscribe to the component variable and show its value like this:

<div>
 {{ numsAtComponent$ | async }}
</div>

Answered By - The Fabio