Here is a demonstration of Redbus, where bus data appears after clicking various checkboxes. I am looking to implement a similar filter in Angular 2.
In my scenario, the data is fetched from an API and stored in multiple table formats. I require the ability to filter across multiple tables.
Essentially, I need the feature that filters the data from the tables when certain checkboxes are selected.
<!--Checkboxes section: using 'bus' and 'fare' as examples-->
<div class="filter2" id="myUL">
<div class="search">
<i class="fa fa-search"></i>
<input class="search-box" type="text" placeholder="" id="myInput" onkeyup="myFunction()">
</div>
<label class="containe">Fare
<input type="checkbox">
<span class="checkmark"></span>
</label><br/>
<label class="containe">Bus
<input type="checkbox">
<span class="checkmark"></nbsp;</span>
</label><br/>
</div>
<!--Table section starts here-->
<table class="col-xs-12 col-sm-12 col-md-12 col-lg-12 main-bus-table">
<!-- Search result table -->
<ng-container *ngFor="let bus of this.global.getSearchResult.data.onwardSearch ">
<!-- Filter results container -->
<tr class="busrow">
<div class="row">
<div class="col-xs-0 col-sm-0 col-md-1 col-lg-1 busdiv-pad">
</div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 bus-details">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 buslogo">
<img src="assets/img/bus1.svg" height=44px width=44px>
<div class="rating-circle">5.0</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-11 col-lg-11">
<table class="wd-100 bus-table">
<tr>
<td class="wd-30 busname"><p>{{bus.operatorName}}<span class="gps">GPS</span></p></td> <!-- Bus name -->
<td class="wd-30 timing"><p>{{bus.departureTime}} <img src="assets/img/to1.svg"> {{bus.arrivalTime}}</p></td> <!-- Bus time -->
<td class="wd-20 seats-left"><p>Total Seats : {{bus.availableSeats}}</p></td> <!-- Bus available seats -->
<td class="wd-20 price"><p><i class="fa fa-rupee"></i>{{bus.fare}}</p></td> <!-- Bus fare -->
</tr>
<tr>
<td class="wd-30 bustype"><p>{{bus.vehicleClass}}</p></td> <!-- Bus type -->
<td class="wd-30 distance"><p>06h 30m/340km</p></td> <!-- Bus total distance -->
<td class="wd-20 windowseats"><p>1 Window</p></td> <!-- Bus total window seats -->
<td class="wd-20 revisedprice"><p><i class="fa fa-rupee"></i>{{bus.fare}}</p></td> <!-- Bus revised fare -->
</tr>
</table>
</div>
</div>
</div>
</tr>
</ng-container>
</table>
Thank you in advance for any assistance with my issue.
Below is a screenshot showcasing the Redbus filter example: