I'm struggling with displaying a "No Records Found" message in my app that features a range slider. Whenever the range slider is dragged, the results are updated based on the value of "sliderPipe". Despite this, I am unable to show the message when no records are found.
HTML Template
<div class="well" *ngFor="let data of onewayFormData$ |
sliderPipe: sliderValue as results;">
<div class="row">
<div class="col-md-6 onewayresults">
<h2> {{ data.cost | currency: 'INR':true }} </h2>
<h3> {{ data.agencycode }} </h3>
<h5> {{ data.ocity }} > {{ data.dcity }}</h5>
<h5> Depart: {{ data.depart }} </h5>
<h5> Arrive: {{ data.arrive }} </h5>
</div>
<div class="col-md-6">
<div style="float:right;">
<img [src]="data.imageurl" width="120px" height="100px" [alt]="data.agency" />
<br/>
<br/>
<button class="btn btn-success"> Book Tickets </button>
</div>
</div>
</div>
Length: {{ results }}
<div class="well" *ngIf="results.length == ''">
<div class="alert alert-danger"> No Results Found....... </div>
</div>
</div>
Pipe 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 => {
return data.cost >= args;
});
}
}