Angular 2 filter an Observabble

Question

I want to show a list of IMessage on screen and be able to filter them using a Pipe. The message is actually an Observable<IMessage[]> on which I want to filter each IMessage by checking its isPrivate property. The code of the MessageStatusPipe looks like this:

export class MessageStatusPipe {
    transform(message: Observable<IMessage[]>, privateFilter: bool) {


        //Here I want to return the Messages which the pass the privateFilter, but how?

    }
}

I have read some questions which seem very similar but I don't seem to be able to apply that solution. The following solution by Luka Jacobowitz seems exactly what I need. https://stackoverflow.com/questions/37991713/simple-filter-on-array-of-rxjs-observable#=

============ Update with answer =============

As Meir pointed out the pipe returned a bool value instead of a sub array containing items that matched the filter. My working pipe now looks like this:

export class MessageStatusPipe {
    transform(messages: Observable<IMessage[]>, privateFilter: bool) {
        return messages.map(m => m.filter((message, i) => {
            return message.isPrivate == privateFilter;
        }));
    }
}

Answer 1

Your action can (should) be broken into 2 parts: 1. Getting the async values 2. Filtering them

So, you can change your pipe's signature to:

transform(messages: IMessage[], privateFilter: bool) { ... }

And in your component do:

<div *ngFor="let msg of messages | async | messageStatusPipe">...</div>

If for some reason you want to combine them into one pipe, you can have a look at an article I wrote that shows how to handle async values inside a pipe and adapt it to your needs (mainly, add your filtering loging)

============ added filter logic ==============

return messages.filter(privateFilter);