title: BehaviorSubject produces memoryleak despite clean up in ngOnDestroy
body: <p>I got an address-component, that is toggled via <code>*ngIf</code>. This address-component contains a <code>mat-autocomplete</code> (excerpt):</p>
  
  <p><strong>address-component.html</strong></p>
  
  <pre><code>&lt;mat-form-field class="full-width" appearance="outline"&gt;
    &lt;mat-label&gt;Straße&lt;/mat-label&gt;
    &lt;input matInput [matAutocomplete]="auto" type="text" [formControlName]="formControlMapping.street" /&gt;
    &lt;mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"&gt;
      &lt;mat-option *ngFor="let street of streets$ | async" [value]="street"&gt;
        {{ street }}
      &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The different options for the <code>mat-autocomplete</code> are derived from a <code>BehaviorSubject</code>. In order to prevent memory leaks, I <code>complete</code> and <code>unsubscribe</code> in <code>ngOnDestroy</code>.
  Nevertheless I somehow managed to produce a memory leak, since I'm getting the following error after toggling the component via <code>*ngIf</code> and trying to write new values into my <code>BehaviorSubject</code>.</p>
  
  <pre><code>ObjectUnsubscribedErrorImpl {message: "object unsubscribed", name: "ObjectUnsubscribedError"}
  </code></pre>
  
  <p>What am I doing wrong? Where do I produce the memoryleak?</p>
  
  <p><strong>address-component.ts</strong></p>
  
  <pre><code>export class AddressFormComponent implements OnInit, OnDestroy {
    @Input() formGroup: FormGroup;
    public streetSubject = new BehaviorSubject&lt;string[]&gt;([]);
    public streets$: Observable&lt;string[]&gt;;
  
    ngOnInit(): void {
      ...
      this.formGroup.get(this.formControlMapping.zipCode).valueChanges.subscribe({
        next: () =&gt; {
          this.addressService
            .getStreets()
            .pipe(
              tap((streets) =&gt; {
                this.streetSubject.next(streets);
                this.streets$ = of(this.filter(this.formGroup.get(this.formControlMapping.street).value, streets));
              })
            )
            .subscribe();
        }
      });
      ...
      this.disableDependingForms();
    }
  
    disableDependingForms(): void {
      ...
      this.addressService.getStreets().subscribe({
        next: (val) =&gt; {
          const street = this.formGroup.get(this.formControlMapping.street).value;
          this.streetSubject.next(val);
          this.streets$ = this.streetSubject.pipe(map((streets) =&gt; this.filter(street, streets)));
        }
      });
      ...
    }
  
    ngOnDestroy(): void {
      this.streetSubject.complete();
      this.streetSubject.unsubscribe();
    }
  }
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>My goal: according to the value of zipCode, I need to fetch the streets located in this zipCode area from an api. There are several other conditions which have to be met in order to fetch the streets but they are static and do not complicate anything. The streets shall be updated when the value of <code>zipCode</code> changes.
  Basically: get streets from an API according to the value of a <code>formControl</code> named <code>zipCode.</code></p>
  
  <p>The leak stems from calling <code>this.streetSubject.next(streets);</code> inside <code>next</code>.</p>
  
  <p>I tried, but the <code>ObjectUnsubscribedErrorImpl</code> still remains. Any suggestion?</p>
  
  <pre><code>this.formGroup
    .get(this.formControlMapping.zipCode)
    .valueChanges.pipe(
      switchMap((zipCode: string) =&gt; {
        return this.addressService.getStreets().pipe(
          map((val) =&gt; ({ streets: val, zipCode })),
          takeUntil(this.unsubscribe)
        );
      }),
      takeUntil(this.unsubscribe)
    )
    .subscribe({
      next: ({ zipCode, streets }) =&gt; {
        ...
        this.streetSubject.next(streets);
        ...
      }
    });
  </code></pre>