Using custom pipe and async pipe together

Question

In my project I have a custom pipe to filter a list:

@Pipe({name: 'filterList'})
export class FilterListPipe implements PipeTransform {
  transform(value: string[], arg: string[]): any {
    if (!value) return value;
    return value.filter( el => !arg.includes(el));
  }
}

I'm using this pipe as follows:

<md-select placeholder="Grupos" (change)="changeGroup($event)">
  <md-option 
    *ngFor="let group of (allGroups | async) | filterList : (userDetail | async)?.groups" 
    [value]="group">
    {{ group }}
  </md-option>
</md-select>

The problem is I receive an error raised in the FilterListPipe :

arg is null

So this is not working:

let group of (allGroups | async) | filterList : (userDetail | async)?.groups

Can I somehow use the result of async to be passed as an argument of my custom pipe? Or should I subscribe to the observable in my class and create another class variable?

Answer 1

I solved my problem:

I had to put my custom pipe before the async pipe. Like this:

*ngFor="let group of allGroups | filterList : (userDetail | async)?.groups | async"

and now the value of the first argument in tranform function is an observable, so:

@Pipe({name: 'filterList'})
export class FilterListPipe implements PipeTransform {
    transform(value: Observable<any>, arg: string[]): any {
        return value
            .map( groups => groups.filter( el=> !arg.includes(el) ) );
    }
}