Creating an Angular Pipe - OrderBy 

Angular provides the Pipe decorator for ease in creating view filters. Let's start by showing how we will use this in the view. You can see that it appears very similar to a command-line pipe used in Unix shell scripts; hence, it's named: Pipe:

<ListView [items]="playerService.tracks | orderBy: 'order'">

This will take the playerService.tracks collection and ensure it is ordered via the order property of each TrackModel for the view display.

Since we may want to use this anywhere in our app views, let's add this pipe as part of CoreModule. Create app/modules/core/pipes/order-by.pipe.ts and here is how we will implement OrderByPipe:

import { Pipe } from '@angular/core';@Pipe({ name: 'orderBy'})export class ...

Get NativeScript for Angular Mobile Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.