Setting variable with RxJs tap operator

Question

I've been had difficulties in setting the variable awaiting_response (below) to true (it doesn't set), using tap() from RxJs.

A hacky solution was made by setting outside the pipe() but I imagine it's not ideal.

The same code can be viewed here

Here is the component.ts

import { Component, OnInit } from "@angular/core";
import { Observable, Subject, of } from "rxjs";
import { debounceTime, distinctUntilChanged, tap, switchMap, catchError, finalize } from "rxjs/operators";
import { ServiceApiService, ITemp } from "./service-api.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  protected addresses: Observable<ITemp[]>;
  private search_term: Subject<string> = new Subject<string>();
  protected executing_search: boolean = false;
  protected awaiting_response: boolean = false;

  constructor(private search: ServiceApiService) {}

  ngOnInit() {
    this.addresses = this.search_term.pipe(
      debounceTime(3500),
      distinctUntilChanged(),
      tap(() => (this.awaiting_response = true)),
      tap(() => () => console.log("awaiting", this.awaiting_response)),
      switchMap((term: string) =>
        this.search.search_addresses(term).pipe(
          catchError(() => of<ITemp[]>([]))
          //finalize(() => setTimeout(() => (this.awaiting_response = false), 0))
        )
      ),
      tap(() => (this.awaiting_response = false)),
      tap(() => console.log("awaiting", this.awaiting_response)),
      tap(() => (this.executing_search = false))
      //finalize(() => (this.awaiting_response = false))
    );
  }

  execute_search() {
    this.executing_search = true;
    this.search_term.next("term");
  }
}

The service

import { Injectable } from "@angular/core";
import { Observable, Subscriber } from "rxjs";

export interface ITemp {
  value: string;
}

@Injectable({
  providedIn: 'root',
})
export class ServiceApiService {
  constructor() {}

  search_addresses(term: string): Observable<ITemp[]> {
    return Observable.create((observer: Subscriber<any>) => {
      observer.next([{ value: `response: ${new Date().toString()}` }]);
      observer.complete();
    });
  }
}

And the component.html

<button (click)="execute_search()">Search</button>
<div>Awaiting: {{awaiting_response | json}}</div>
<div>Executing {{executing_search | json}}</div>
<div>Response: {{addresses | async | json}}

Answer 1

You just can't see the log, replace

tap(() => () => console.log("awaiting", this.awaiting_response))

to

tap(() => console.log("awaiting", this.awaiting_response))