OrderBy Pipe

ng g p orderby --skip-import

Pipe

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

@Pipe({
  name: 'orderBy',
  standalone: true,
})
export class OrderByPipe implements PipeTransform {
  transform(array: any[], direction = 'asc', field?: string): any[] {
    if (!Array.isArray(array)) {
      return array;
    }

    let sortedArray: any[] = [];

    if (field) {
      // Ha van mező (field) megadva
      sortedArray = array.sort((a, b) => (a[field] > b[field] ? 1 : -1));
    } else {
      sortedArray = array.sort(); // Ha nincs mező megadva, egyszerűen rendezzük az elemeket
    }

    if (direction === 'desc') {
      return sortedArray.reverse();
    }
    return sortedArray;
  }
}

Component

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { OrderByPipe } from 'src/app/pipes/orderby.pipe';

@Component({
  standalone: true,
  imports: [OrderByPipe, CommonModule],
  selector: 'app-pipe',
  templateUrl: './pipe.component.html',
  styleUrls: ['./pipe.component.scss'],
})
export class PipeComponent {
  itemsArray1 = ['Banana', 'Apple', 'Orange', 'Strawberry', 'Blueberry', 'Raspberry', 'Ananas', 'Avocado'];
  itemsArray2 = ['Banana', 'Apple', 'Orange', 'Strawberry', 'Blueberry', 'Raspberry', 'Ananas', 'Avocado'];
  itemsArray3 = ['Banana', 'Apple', 'Orange', 'Strawberry', 'Blueberry', 'Raspberry', 'Ananas', 'Avocado'];
}

<h2>OrderBy</h2>
    <article class="grid-3">
      <div>
        <h3>Rendezettlen tömb</h3>
        <ul class="list-group">
          <li class="list-group-item" *ngFor="let item of itemsArray1">{{ item }}</li>
        </ul>
      </div>
      <div>
        <h3>Növekvő sorrend</h3>

        <ul class="list-group">
          <li class="list-group-item" *ngFor="let item of itemsArray2 | orderBy : 'asc'">{{ item }}</li>
        </ul>
      </div>

      <div>
        <h3>Csökkenő sorrend</h3>

        <ul class="list-group">
          <li class="list-group-item" *ngFor="let item of itemsArray3 | orderBy : 'desc'">{{ item }}</li>
        </ul>
      </div>
    </article>