ReplaySubject it is updating response but on View is still the same

Question

I am having an error with ReplaySubject which after updating an Array it is not showing new values on UI but still the old ones. If I reload the page then I can see new changes. I tried ngZone but still nothing.

My code it is splited on a service and in component.

This is the Service.

private userData = new ReplaySubject<any>();

public user(): Observable<User> {
  return this.userData.asObservable();
}

public getUserData(userId) {
    this.http.get(`${this.baseUrl}/user-profile/${userId}`).subscribe(res => this.userData.next(res));
}


public updateUser(userId, user: User) {
    const api = `${this.baseUrl}/user/${userId}`
    this.http.put<any>(api, user).pipe(take(1)).subscribe((res) => {
    this.userData.next(res);
    })
}

This is the component

public user$: Observable<User>;
currentUser: User;


this.userService.getUserData(this.userID);
      this.user$ = this.userService.user();
      this.cd.detectChanges();
      this.ngZone.run(() => {
        this.user$.subscribe((res: User) => {
          console.log(res);
          this.currentUser = res;
          this.model = res?.userCV[0];
        });
     });

And this is the HTML.

<div class="Title-title-titleWrapper first-template-titleWrapper">
          <h4 *ngIf="model?.hideName">{{currentUser?.firstName}} {{currentUser?.lastName}}</h4>
          <h5>{{model?.newJobTitle}}</h5>
          <div [innerHTML]="model?.description | noSanitize"></div>
        </div>

Answer 1

this.cd.detectChanges();

Should be called after at the end of your subscribe block.

Is your template binding to user$, if not I don't think the first detect changes call is needed.