title: Hide spinner component when Observable completed
body: <p>I'm trying to display a spinner within a button as soon as a certain observable starts and hide it again as soon as it ends.</p>
  
  <p>After hours of researching I'm kinda lost how I could achieve it (I know there are several posts here but none of it seems to help and even the often mentioned angular-2-busy or one of it's forks doesn't really work)</p>
  
  <p>So there workflow would be</p>
  
  <p>I have a directive/component to which I can provide an Observable via @Input.
  The directive should then show the spinner as soon as the Observable starts (or I can just use the click event).
  and it should hide the spinner again when the Subscription completes.</p>
  
  <p>Note: the examples below are simplified (no spinner etc. involved) but show exactly what the problem is.</p>
  
  <pre><code>export class AppComponent {
    name = 'Angular 6';
    test: Observable&lt;any&gt;;
  
    constructor(private http: HttpClient) {
  
      const obs = of(true);
      this.test = obs.pipe(tap(() =&gt; console.log('tap1')), flatMap(() =&gt; {
        return this.http.get('https://httpbin.org/get');
      })
      );
    }
  
    demo() {
      this.test.subscribe((state: any) =&gt; console.log(state));
    }
  }
  
  export class HelloComponent implements OnChanges {
    @Input() name: string;
  
    @Input()
    obs: Observable&lt;any&gt;;
  
    ngOnChanges(changes: SimpleChanges): void {
  
      if (changes.obs) {
        this.obs.pipe(map(() =&gt; console.log('component')));
      }
    }
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-m46vhp?file=src%2Fapp%2Fhello.component.ts" rel="nofollow noreferrer">here is the stackblitz</a> which illustrates what I try to accomplish and also that it currently doesn't work</p>
  
  <p>When I call <code>subscribe</code> in the <code>hello-component</code> it obviously executes every piped method imediatly which is not what I want.</p>
  
  <p>When I don't call <code>subscribe</code> the <code>pipe</code> operator creates a new <code>subscription</code> which obviously never gets executed.</p>
  
  <p>The desired behaviour is the following output in the console.</p>
  
  <ul>
  <li>"tap1"</li>
  <li>result of the http call</li>
  <li>"component"</li>
  </ul>
  
  <p>I have the feeling I'm missing something really obvious.
  Any ideas on how to solve this?</p>