title: Angular 4 *ngFor array length with pipe
body: <p>I have a range slider in my app. If you drag the range slider, based on "sliderPipe" change results will appear. My problem is I'm unable to display the "No Records Found" message.</p>
  
  <h3>html template</h3>
  
  <pre><code>&lt;div class="well" *ngFor="let data of onewayFormData$ | 
                                    sliderPipe: sliderValue as results;"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 onewayresults"&gt;
        &lt;h2&gt; {{ data.cost | currency: 'INR':true }} &lt;/h2&gt;
        &lt;h3&gt; {{ data.agencycode }} &lt;/h3&gt;
        &lt;h5&gt; {{ data.ocity }} &gt; {{ data.dcity }}&lt;/h5&gt;
        &lt;h5&gt; Depart: {{ data.depart }} &lt;/h5&gt;
        &lt;h5&gt; Arrive: {{ data.arrive }} &lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
        &lt;div style="float:right;"&gt;
          &lt;img [src]="data.imageurl" width="120px" height="100px" [alt]="data.agency" /&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;button class="btn btn-success"&gt; Book Tickets &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    Length: {{ results }}
    &lt;div class="well" *ngIf="results.length == ''"&gt;
      &lt;div class="alert alert-danger"&gt; No Results Found....... &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>Pipe Code</h3>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'sliderPipe'
  })
  export class SliderPipePipe implements PipeTransform {
    transform(value, args ? ) { // ES6 array destructuring
    console.log('Arguments: ' , value.length);
    return value.filter(data =&gt; {
        return data.cost &gt;= args;
      });
    }
  }
  </code></pre>