angular 2 sequential pipes - filter

Question

how do I use two pipes sequentially?
<div class="thread" *ngFor="thread of threadlist | bookmarkPipe | threadPipe"></div>
In specific my threads have a bookmark:boolean property as well as tag properties (unit,task,subtask).
So what I want to achieve is that the first pipe filters all threads which are bookmarked, then apply the 2nd pipe (below)
export class ThreadPipe implements PipeTransform{
transform(array:Thread[], [unit,task,subtask]):any{
//See all Threads
if(unit == 0 && task == 0 && subtask == 0){
return array
}
//See selected Units only
if(unit != 0 && task == 0 && subtask == 0){
return array.filter(thread => {
return thread.unit === unit;
});
}
//See selected Units and Tasks
if (unit != 0 && task != 0 && subtask == 0){
return array.filter(thread => {
return thread.unit === unit && thread.task === task;
});
}
// See selected units, tasks, subtask
if (unit != 0 && task != 0 && subtask != 0){
return array.filter(thread => {
return thread.unit === unit && thread.task === task && thread.subtask === subtask;
});
}
}
}

Answer 1

In fact, there is nothing special to do. The second pipe will receive the value from the previous one:
data -> Pipe1 -> filtered data (#1) -> Pipe2 -> filtered data (#2)
For example, if I have an array [ 'val1', 'val2', 'val3' ] and with the following pipes:
#Pipe({
name:'pipe1'
})
export class Pipe1 {
transform(data) {
return data.filter((d) => {
return d!= 'val1';
});
}
}
#Pipe({
name:'pipe2'
})
export class Pipe2 {
transform(data) {
return data.filter((d) => {
return d!= 'val2';
});
}
}
By using the following expression in an ngFor:
#elt of data | pipe1 | pipe2
data | pipe1 will return [ 'val2', 'val3' ] and return [ 'val3' ] if we apply the pipe2 on the previous result.
See the corresponding plunkr: https://plnkr.co/edit/EpKMitR3w89fRiyGYQz7?p=preview.