Angular – Custom Pipe OrderBy

Tutorial Angular

von Ardian Shala, 12.04.2017 - update: 19.05.2017
Ein Custom Pipe ermöglicht das definieren von weiterer Funktionalität, welche gerade beim Iterieren von Einträgen von Nutzen sein kann.
Hier erstellen wir einen Angular Custom Pipe, welcher die "OrderBy" Funktionalität mittels FieldName ermöglicht
Vorraussetzung:
  • Angular - link
  • Visual Studio Code - link

Custom Pipe erstellen

Ein Custom Pipe ermöglicht das definieren von weiterer Funktionalität, welche gerade beim Iterieren von Einträgen von Nutzen sein kann.
Wir definieren einen injectable Custom Pipe, welcher sowohl im View als auch in einer anderen Component genutzt werden kann.
Für das Sortieren nutzen wir eine einfache „.sort“ Methode, die beliebig erweitert werden kann.
Zu beachten ist hier „transform“, welche uns Zugriff auf unsere zu iterierende Einträge und weitere Parameter ermöglicht.

import { Pipe, Injectable, PipeTransform } from '@angular/core';

@Pipe({
    name: 'orderBy',
    pure: false
})
@Injectable()
export class MyOrderByPipe implements PipeTransform {
    transform(items: any[], field: string): any[] {
        if (!items) return [];

        return items
            .sort((a, b) => {
                 return a[field] - b[field];
            });
    }
}

Custom Pipe im View benutzen

Um unseren Custom Pipe zu nutzen, müssen wir diesen erst als „Declaration“ in unserem Module hinzufügen.

<ul>
    <li *ngFor="let item of items | orderBy : 'propertyName'"></li>
</ul>

Autor: Ardian Shala

Ersteller der Webseite MuchaDev.
Frontend Entwickler mit Angular, Ionic und Backend Entwickler mit C#.