OrderBy

OrderBy is a custom pipe to order arrays of any arbitrary type.

For a write up on the making of this pipe, feel free to check this out!

One-Dimensional Arrays

Add Fruit

Unordered

*ngFor="let f of fruit"

Ordered

*ngFor="let f of fruit | orderBy : '{{fruitOrderByConfig}}'"
*ngFor="let f of fruit | orderBy : ['{{fruitOrderByConfig}}']"
  • {{f}}

Multi-Dimensional Arrays

Add Person

Unordered

*ngFor="let person of people"

Ordered

*ngFor="let person of people | orderBy : ['{{peopleOrderByConfig[0]}}', '{{peopleOrderByConfig[1]}}']"
  • {{person.firstName}} {{person.lastName}}, {{person.info.age}}

Import


{{'import {OrderByPipe} from "fuel-ui/fuel-ui"'}}

Getting Started

OrderBy is pipe that allows for sorting ascending or descending on any array types across multiple columns. Simply pass an array of strings with the name of the key within the object. Put a '-' in front of the name if you wish to sort descending on it. OrderBy pipe also allows for data to be pushed dynamically and sorted.

Usage

One Dimensional Arrays


*ngFor="let f of fruit | orderBy : '+'"
*ngFor="let f of fruit | orderBy : ['+']"


export class OrderByExample {{'{'}}
    fruit: string[] = ["orange", "apple", "pear", "grape", "banana"];
{{'}'}}

Multi-Dimensional Arrays


*ngFor="let person of people | orderBy : ['-info.age', 'firstName']"