title: Angular 10: subscribing to an observable won't fire after a next call
body: <p>I have a very simple scenario of subscribing to an Observable via an injected <code>FooService</code>:</p>
  <p><code>foo.service.ts</code>:</p>
  <pre><code>@Injectable()
  export class FooService {    
      private foosSubject = new Subject&lt;FooModelDTO[]&gt;();        
      
      constructor() {
        this.setFoos([{id: &quot;Some Id&quot;}]);
      }
      setFoos(foos) {
          console.log(&quot;FooService.setFoos&quot;, foos);
          this.foosSubject.next(foos);
      }
  
      onFoos(): Observable&lt;FooModelDTO[]&gt; {
          return this.foosSubject.asObservable();
      }    
  }
  </code></pre>
  <p><code>app.componenet.ts</code>:</p>
  <pre><code>export class AppComponent  {
      private fooSubscription: Subscription;
      constructor(private _fooService: FooService) { 
        this.fooSubscription = this._fooService.onFoos()
        .subscribe({
          next: this.handleSubscription.bind(this)
        });      
      }
  
      handleSubscription(foosModels: FooModelDTO[]) {
          console.log(&quot;Yes!!!!&quot;); &lt;--- I'm not getting here!
      }
  }
  </code></pre>
  <p>My question:</p>
  <p>Why I'm am not able to fire the <code>handleSubscription</code> method via <code>subscribe</code>'s <code>next</code>?</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-21oraq" rel="nofollow noreferrer">StackBlitz</a></p>