title: how to create a custom sorting pipe in angular 4
body: <p>how to create a custom sorting pipe in angular 4</p>
  
  <pre><code>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) =&gt; {
                      this.filteredCinema = response;
                  },
              //  (error) =&gt; console.log(error)
          );}
  
  component.html
  
  &lt;div class="table-scrollable"&gt;
  &lt;table class="table table-striped table-bordered table-advance table-hover"&gt;
  &lt;thead&gt;
     &lt;tr&gt;
     &lt;th&gt;Cinema&lt;/th&gt;
      &lt;th&gt;Cinema Operator&lt;/th&gt;
      &lt;th&gt;Capacity&lt;/th&gt;
       &lt;th&gt;Cinema Status&lt;/th&gt;
       &lt;th&gt;Unavailable From Date&lt;/th&gt;
       &lt;th&gt;Unavailable To Date&lt;/th&gt;
       &lt;th&gt;Actions&lt;/th&gt;
       &lt;/tr&gt;
  &lt;/thead&gt;
     &lt;tbody&gt;
   &lt;!-- Loop starts here --&gt;
   &lt;tr class="cinema-row cathay" *ngFor="let cintable of filteredCinema | sorting:'cintable.cinema_name' "&gt;
   &lt;td&gt;
    &lt;p class="uppercase"&gt;{{cintable.cinema_name }}&lt;/p&gt;
   &lt;/td&gt;
     &lt;td&gt; 
     &lt;img [src]="getOperatorImg(cintable.cinema_operator_id)" height="30"&gt;
       &lt;/td&gt;
      &lt;td&gt;
   &lt;small&gt;
  Halls:
   &lt;strong&gt;{{cintable.halls.length}}&lt;/strong&gt;
   &lt;/small&gt;
    &lt;/td&gt;
    &lt;td&gt;
  &lt;p class="uppercase"&gt;{{getStatusName(cintable.status)}}&lt;/p&gt;
   &lt;/td&gt;
   &lt;td&gt;
   &lt;p class="uppercase"&gt;{{cintable.available_date_from | date}}&lt;/p&gt;
   &lt;/td&gt;
   &lt;td&gt;
   &lt;p class="uppercase"&gt;{{cintable.available_date_to | date}} &lt;/p&gt;
  &lt;/td&gt;
   &lt;td&gt;
   &lt;p class="uppercase"&gt;{{cintable.entity}} &lt;/p&gt;
  &lt;/td&gt;
  &lt;!-- Loop ends here --&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  
  Pipe.ts
  
  import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'sorting'
  })
  export class SortingPipe implements PipeTransform {  
    transform(value: any, args?: any): any {
      return null;
    }
  }
  </code></pre>
  
  <p>need to sort the cintable.cinema_name but not able to find the solution.
  Here are the link i have gone through
  <a href="http://hashtagcoder.com/an-introduction-to-angular-cli-part-3-sort-and-filter-data-with-custom-pipes/" rel="nofollow noreferrer">http://hashtagcoder.com/an-introduction-to-angular-cli-part-3-sort-and-filter-data-with-custom-pipes/</a></p>
  
  <p><a href="https://hassantariqblog.wordpress.com/2017/03/16/angular2-creating-custom-sort-filter-pipe-for-datetime-column-ngfor-directive/" rel="nofollow noreferrer">https://hassantariqblog.wordpress.com/2017/03/16/angular2-creating-custom-sort-filter-pipe-for-datetime-column-ngfor-directive/</a></p>
  
  <p>Please help me with this </p>