title: How to filter observable in parent component from child component?
body: <p>I have two components.</p>
  
  <ol>
  <li>Item List -- for displaying a list of items (parent)</li>
  <li>Item      -- wrapper for a single item (child)</li>
  </ol>
  
  <p>In the <code>Item List component</code> I basically create an observable using a service. The function getItems() returns an observable of items:</p>
  
  <pre><code>items$: Observable&lt;Item[]&gt;;
  
  ngOnInit() {
    this.items$ = this.service.getItems();
  }
  </code></pre>
  
  <p>In the template I do ngFor with async pipe to display a list of items:</p>
  
  <pre><code>&lt;div *ngFor="let item of items$ | async"&gt;
      &lt;card-item [item]="item"&gt;&lt;/card-item&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, in the <code>Item component</code> I have an option to remove that particular item from a firestore database:</p>
  
  <pre><code>@Input() item: Item;
  
  removeItem() {
      this.service.removeItem(this.item.id);
  }
  </code></pre>
  
  <p>This operation takes some time so I wanted to remove it "locally" from the observable in the parent component.</p>
  
  <p>I probably have to filter the observable in the parent component and somehow return a new filtered observable, but I don't know how can I manage this from the child component?</p>
  
  <pre><code>removeItem() {
      // remove from firestore, but this can take some time
  
      this.service.removeItem(this.item.id);
  
      // meanwhile... remove it from the observable on parent
  
      source.pipe(filter(item =&gt; item.id !== this.item.id)); // here is the problem I have
  }
  </code></pre>
  
  <p>As you can see above I don't know how to "connect" to the observable and filter it. </p>
  
  <p>The reason for that is when I want to animate the remove operation (like fade out), the item flashes. It's because the animation finishes earlier than the record is removed from the firestore.</p>