Merge two observable in ngAfterViewInit()

Question

This bug is related with this.events$ initialized in ngOnInit()

This question is very similar to others but still slightly different when it comes to execution time.

I have simple zip to merge two observable like:

zip(this.eventService.searchedEvent$, this.events$)
    .subscribe(([input, events]) => console.log(input, events))

The problem is that I don't want to execute this in ngOnInit() where it totally works fine. My point is to execute it in ngAfterViewInit() when data is loaded. Flow of app:

2. Load data in component by ngOnInit().

3. Emit value from search bar via service, like here: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

4. Get values from service in ngAfterViewInit()

Notice that when I simply do subscribe() to observable this works:

  ngAfterViewInit() {
    // this.eventService.searchedEvent$.subscribe(console.log)
  }

Unfortunately I need to merge observable from search input and observable of datasource so I am trying to combine them both:

 ngAfterViewInit() {
     zip(this.eventService.searchedEvent$, this.events$)
    .subscribe(([input, events]) => console.log(input, events))
   }

But still it is not fired. Why it works in ngOnInit() but not in ngAfterViewInit() ever is simple subscription is emitted dynamically in ngAfterViewInit() ? Any solution for this?

EDIT:

ngOnInit() {

    this.isLoading$ = this.store.pipe(select(selectEventsLoading))

    this.events$ = this.paginationService.page$.pipe(
      switchMap(pageIndex => this.store.pipe(
        delay(0),
        select(selectEventsPageByGenre(this.musicGenre, { pageIndex: pageIndex, pageSize: PAGE_SIZE })),
        map(events => {

          if (events.length > 0) {
            return events;
          }

          this.store.dispatch(new EventsPageRequested({
            musicGenre: genreToEnum(this.musicGenre),
            page: {
              pageIndex: pageIndex,
              pageSize: PAGE_SIZE
            }
          }));

          return [];
        }),
        tap(events => {
          this.isEmpty$ = of(this.isListEmpty(events))
          this.paginationService.isIncrementEnabled(events)
        })
      ))
    );

What I have noticed is that using zip in ngOnInit() gets values until first char deletion, for example:

• insert chars:
• input: 'a' -> emit 'a'
• input: 'ab' -> emit 'ab'
• input: 'abc' -> emit 'avc'
• remove 1 char:
• input: 'ab' -> nothing emitted,
• retry:
• input: 'abc' -> nothing emitted,