Question: I am fairly new to rxjs and I have something like following. 

I subscribe to some `rxjs Subject` and don't know how to remove only particular item from its Observable.So that, I use a second variable removeItem and subscribe it as well and remove element from local carItems var. (It works but...Yes,it smells bad. There must be a better practice)

After deleting an object I can re-have whole set in my subscription but I do not want that because there is an animation for each item. There is also another animation for removal of each item. 

Is there a usage something like C# ObservableCollection which notifies both add/remove ops and let me know which particular object is removed? 

```
  import { TS } from 'typescript-linq'    
  @Injectable() 
  export class CartService {

  private items = new ReplaySubject<Array<ProductModel>>(1);
  private removeItem= new ReplaySubject<ProductModel>(1);
  var cartItems=new Array<ProductModel>();

  removeFromCart(remItem)
    {
      this.removeItem.next(remItem);
    }
 ...

```

Moreover, TS.Linq.Extensions works quite well. But, requires something support `[Symbol.iterator]` and I needed to go for an `Array` instead of my local `Ovservable`.

*(I don't know if there is a way to use it as method chain like we use in C# )*

```
var groupedItems=TS.Linq.Extensions.groupBy(cartItems,(i:ProductModel)=>i.Name)
    .select((t)=>{return {item:t.key,count:t.count()}});

    groupedItems.forEach(item=>{console.log(item.item+" count " + item.count)});

```

There is a semi-similar question. I still couldn't make following QA's accepted answer run in plnkr.

[How to remove specific element from Observable<Array<any>>](https://stackoverflow.com/q/38181954/413032)

Answer: 
There's a way to do what you want but not the best approach to be honest. If you want a global state, use a global subject instead. If local state you can just use plain array, or by combining user action with data like 

assume userclick$ and buttonClick$ will modify the data

```
Observable.merge(userClick$,butonClick$).startWith([1,2,3])...

```

```js
let items$=new Rx.BehaviorSubject([1,2,3])
let itemRemove=(index)=>{
 let arr=null 
  items$.subscribe(value=>{
   ar=value.filter((value,i)=>i!=index) 
  })
 items$.next(ar) 
}
itemRemove(1)
items$.subscribe(console.log)
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.min.js"></script>
```
Could you please try the below code:

```
@Injectable()
export class CartService{

  private items = new BehaviorSubject<Array<ProductModel>>(null);
  private cartItems=new Array<ProductModel>();

  removeFromCart(remItem)
  {
    this.carItems = this.carItems.filter((item:ProductModel) => item !== remItem);
    this.items.next(this.carItems);
  }

  getItems():BehaviorSubject<Array<ProductModel>>{
    return this.items;
  }

}

import {CartService} from 'yourServiceLocation';

@Component({
  selector: 'test-com',
  template: `<div>Test component</div>`
})

 export class TestComponent{

  private cartItems=new Array<ProductModel>();

  constructor(private cartService:CartService){
    this.cartService.getItems()
      .subscribe(items => this.carItems = items);
  }

  //On button clicked or so

  private removeItem(item:ProductModel){
    this.cartService.removeFromCart(item);
  }

}

```