custom pipe array empty

Question

I created this custom pipe:

@Pipe({ name: 'orderBy' })
export class OrderByPipe implements PipeTransform {
     transform(items: any[], orderBy: string): any[] {
        if (items && items.length > 1) {
            console.log('items -> ', items);
        }
        console.log('return -> items -> ', items);
        return items;
     }
 }

I am using it in a component:

<tr *ngFor="let item of items | orderBy:'title'" class="myclass">

The table rows display correctly, but in the pipe the items array length is always zero. The console statement for the return from the pipe shows an array populated with objects. Why does the array appear to be empty?

Answer 1

Just add parenthesis as shown below. This sends the item to the pipe and the result back to the ngFor loop.

<tr *ngFor="let item of ( items | orderBy:'title')" class="myclass">

See: Angular Offiical Documentation Search for "ngfor" to see examples.