how to create a custom sorting pipe in angular 4

Question

component.ts

@Component({
    selector: 'app-cinemas',
    templateUrl: './cinemas.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./cinemas.component.css']
})
export class CinemasComponent implements OnInit {

    filteredCinema = [];   

 master() {
        this.cinemaService.getCinMaster()
            .subscribe(
                (response: any) => {
                    this.filteredCinema = response;
                },
            //  (error) => console.log(error)
        );}

component.html

<div class="table-scrollable">
<table class="table table-striped table-bordered table-advance table-hover">
<thead>
   <tr>
   <th>Cinema</th>
    <th>Cinema Operator</th>
    <th>Capacity</th>
     <th>Cinema Status</th>
     <th>Unavailable From Date</th>
     <th>Unavailable To Date</th>
     <th>Actions</th>
     </tr>
</thead>
   <tbody>
 <!-- Loop starts here -->
 <tr class="cinema-row cathay" *ngFor="let cintable of filteredCinema | sorting:'cintable.cinema_name' ">
 <td>
  <p class="uppercase">{{cintable.cinema_name }}</p>
 </td>
   <td> 
   <img [src]="getOperatorImg(cintable.cinema_operator_id)" height="30">
     </td>
    <td>
 <small>
Halls:
 <strong>{{cintable.halls.length}}</strong>
 </small>
  </td>
  <td>
<p class="uppercase">{{getStatusName(cintable.status)}}</p>
 </td>
 <td>
 <p class="uppercase">{{cintable.available_date_from | date}}</p>
 </td>
 <td>
 <p class="uppercase">{{cintable.available_date_to | date}} </p>
</td>
 <td>
 <p class="uppercase">{{cintable.entity}} </p>
</td>
<!-- Loop ends here -->
  </tbody>
 </table>
</div>

Pipe.ts

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

@Pipe({
  name: 'sorting'
})
export class SortingPipe implements PipeTransform {  
  transform(value: any, args?: any): any {
    return null;
  }
}

need to sort the cintable.cinema_name but not able to find the solution. Here are the link i have gone through http://hashtagcoder.com/an-introduction-to-angular-cli-part-3-sort-and-filter-data-with-custom-pipes/

https://hassantariqblog.wordpress.com/2017/03/16/angular2-creating-custom-sort-filter-pipe-for-datetime-column-ngfor-directive/

Please help me with this

xtj7 · Accepted Answer · 2018-02-27 08:41:49Z

1

The orderBy pipe was removed from Angular 2 because generally filtering logic like this should be done within the component. Since you already return filteredCinema from your component, it would be best to apply custom sorting here.

Assuming you want to have a case-insensitive sorting by cinema_name, do something like this in your subscribe callback:

this.filteredCinema = return items.sort((a, b) => {
    let aLC: string = a.cinema_name.toLowerCase();
    let bLC: string = b.cinema_name.toLowerCase();
    return aLC < bLC ? -1 : (aLC > bLC ? 1 : 0);
});

(Also you should first ensure that response is not empty in this case, for simplicity I left that out)

If you wish filtering to be case-sensitive, simply remove the .toLowerCase calls.

If you still want to do it via a pipe, you should continue reading the tutorial first, because you are lacking the sorting mechanism.

Let's say you wanted a pipe orderByCinemaName:

@Pipe({
  name: 'orderByCinemaName'
})
export class OrderByCinemaNamePipe implements PipeTransform {  
  transform(items: any[]): any[] {
    return items.sort((a, b) => {
        let aLC: string = a.cinema_name.toLowerCase();
        let bLC: string = b.cinema_name.toLowerCase();
        return aLC < bLC ? -1 : (aLC > bLC ? 1 : 0);
    });
  }
}

UPDATE

Fixed the sorting algorithm.

edited Feb 27, 2018 at 8:41

answered Feb 26, 2018 at 19:16

xtj7

5883 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

girish Over a year ago

ERROR in src/app/venues/cinemas/sorting.pipe.ts(10,27): error TS2345: Argument of type '(a: any, b: any) => boolean' is not assignable to parameter of type '(a: any, b: any) => number'. Type 'boolean' is not assignable to type 'number'. getting this error

xtj7 Over a year ago

Sorry, I have used a simplified sorting. I have now fixed that in the code, so it should be fully functional for you now, if you just copy & paste it.

Collectives™ on Stack Overflow

how to create a custom sorting pipe in angular 4

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related