[Disscussion] How are you finding Observables in Angular 2?

I’m starting this discussion simply because I have a hard time figuring out how to use Observables in Ng2. I’d like to know how other developers are using them in your applications, and discuss what works or doesn’t work.

Here’s the scenario that I’m currently working in

I have one component (Inbox) and which injects my MessagesService

MessagesService has a public property messages$: Observable<Message[]>; to which my inbox component subscribes too. It looks like this

// within the Inbox component
this.messages$ = this.$messagesService.messages$;

And then in my inbox template I use ngFor with an async pipe. Here’s how the template looks

<ion-item *ngFor="let message of messages$ | async | messageFilter:selectedMessageType">
    <h2>
      <ion-icon ngIf="message.isNew" name="exclamation"></ion-icon>
      {{message.title}}</h2>
    <button (click)="delete(message)">Delete</button>
    <button (click)="mark(message)">{{message.isNew ? 'Mark as read' : "Mark as unread"}}</button>
</ion-item>

So far so good, but here’s where I start to run into trouble.

Problem #1
When I update a message entity, my ngFor loop doesn’t reflect the change.

 mark(message: Message){
      if(message.isNew)
         this.$messageService.markAsRead(message);
      else
         this.$messageService.markAsUnread(message);

      message.isNew = !message.isNew;
 }

Is this because my ngFor is watching an Observable, and doesn’t detect the change?
Would I have to trigger the next() function on the observable within the MessagesService to fire off a new array?
Is there a way to update a single entity within an observable array, and have ngFor reflect that change (IMO firing a change to an entire array is silly when only one item was updated)?

Problem #2
My ngFor loop uses a messageFilter pipe to filter out messages by type. So when I click Delete, the message type is changed.

 delete(message: Message){
     message.messageType = MessageType.deleted;
 }

Again, my observable hasn’t had an item removed, it’s just a change on the object within the observable. But the template still doesn’t update like I expect it to. On top of that changing the selectedMessageType to view deleted message types doesn’t update the ngFor (I have tried using the pure: false on the pipe, which works, but it ends up calling my pipe transform a lot, which I find is an performance issue).

It also seems that values emitted by an observable, are in some way, a copy, instead of a reference.

Bottom line, it appears to me to Observables are a one-way street. It seems rather difficult to push changes into an observable array.

How are you using observables in your application?