Subject not emitting subsequent vals on subscribe

[mystic lily]

I have a sidebar with movie genres and movie titles as content, it initially loads with a hard-coded value, later when user selects another genre from the sidebar, the subject is updatet with .next(genreId), I crated a pairing helper observable from the subject, it keeps track of the selected genres as such [prevValue, currValue] (initiated with [null, 27]. On a subscribe, the initial val prints to the console, but when a user select another genreId, it does not print it. Where did I go wrong?

private genreSelectedSubject = new Subject<number | null>()
genreSelected$ = this.genreSelectedSubject.asObservable()

genreSelectedPairHistory$ = this.genreSelected$.pipe(
    startWith(null, 28), // empty value to fill-in the buffer
    distinctUntilChanged(),
    pairwise(), // pairs into [prevValue, currValue]
    shareReplay({ refCount: true, bufferSize: 1}),
)

// used in the view
  onGenreSelected(genreId: number | null) {
    if (genreId !== null) {
      this.genreSelectedSubject.next(genreId)
    }
  }

then, in ngOnInit (or subscribtion via async pipe)

  ngOnInit(): void {
    this.genreSelectedPairHistory$.subscribe(val => console.log('SUBSCRIBE', val))
    // prints: SUBSCRIBE [null, 28]
  }

later, when I select different genre from the view, it does not print

[eager trail]

Pairwise only emit when at least 2 value have been emitted

[worn swift]

Post a complete minimal reproduction on Stackblitz. Here's one to get you started, that you can fork, to reproduce your issue: https://stackblitz.com/edit/angular-ivy-xn7com?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html. But as you can see, with the code you posted, I can't reproduce it. So it comes from code that you didn't post.

[mystic lily]

Thank you for your response, I don't think this is the issue, it starts with 2 values, if I put tap operator into the pipe, it will log every change.

[mystic lily]

Thank you for suggestion, strangely, I was not able to reproduce the issue as well even when attempting to replicate the same file structure I have... There is a non-Angular container that handles data etc., the Angular components then inherit it (I know in this example this logic could go into app.component.ts, it is not possible in my real project).

The subscription in ngOnInit works as expected, strangely, I came upon a different issue that I think might be related to the problem in my project, the async pipe in genre-info.component.ts is nor receiving the updated data (while I can see it being updated in the console ).

https://stackblitz.com/edit/angular-ivy-nzsbc7?file=src/app/app.container.ts

[worn swift]

You're not understanding inheritance. If you have two classes AppComponent and GenreInfoComponent inheriting from AppContainer, and you create an instance of AppComponent and an instance of GenreInfoComponent, then you have two instances of AppContainer, each with their own state. Just like in real life: If a Vehicle has an engine. And if Car and Truck extend Vehicle. And if you create a Car, and youn create a Truck, the car and the truck will have their own engine.
Stop using inheritance. Use Angular as it's intended to be used. Store shared state in a service, or pass it as input from the parent to the child.