title: Is unsubscribe needed if an Observable uses an async pipe?
body: <p>I need to determine whether two different approaches for handling Observables are equally valid, or if one will cause memory issues.</p>
  
  <p>In the following example, <code>foo$</code> and <code>bar</code> are template variables that receive their values from a service. Each has its own Observable. In the component, <code>bar</code> is explicitly given its value from a subscription and later ends that subscription in <code>OnDestroy()</code>. <code>foo$</code>, however, does not explicitly subscribe to a service but rather uses an <code>async</code> pipe in the template. </p>
  
  <p>Are <code>foo$</code> and <code>bar</code> both valid ways of displaying the service data, or is <code>foo$</code> problematic because there is no unsubscribing for memory cleanup?</p>
  
  <p><strong>ExampleService:</strong></p>
  
  <pre><code>Injectable()
  export class ExampleService {
      get foo$(): Observable&lt;string&gt; {
          return data.from.api;
      }
  
      get bar$: Observable&lt;string&gt; {
          return data.from.api;
      }
  }
  </code></pre>
  
  <p><strong>ExampleComponent:</strong></p>
  
  <pre><code>@Component({
      template: `
          &lt;div&gt;{{ foo$ | async }}&lt;/div&gt;
          &lt;div&gt;{{ bar }}&lt;/div&gt;
      `
  })
  export class ExampleComponent implements OnInit, OnDestroy {
      public foo$ = this._exampleService.foo$;
      public bar = '';
      private _destroy$ = new Subject();
  
      constructor(private _exampleService: ExampleService) {}
  
      public ngOnInit() {
          this._exampleService.bar$
              .pipe(takeUntil(this._destroy$))
              .subscribe(bar =&gt; this.bar = bar);
      }
  
      /**
       * Cancel subscriptions.
       */
      public ngOnDestroy() {
          this._destroy$.next(true);
          this._destroy$.complete();
      }
  }
  </code></pre>