Multiple filter conditions in Angular2

Question

Note: I'm new to software development, been functional consultant (non-technical) all these years.

I have a list of array being displayed using *ngFor as below:

<li *ngFor="let borrower of borrowers">
    <p>{{borrower.name}},{{borrower.amount}},{{borrower.rate}},{{borrower.tenure}},{{borrower.city}}<p>
</li>

Name is the string. Amount is the number that can take any value between 25000 to 100000. Rate is the number that can range from 12% to 20%. Tenure is the number that can take a value either 6 or 12. City is the string.

I want to filter the above array based on certain filter conditions as below:

<form>
    <input type="text" name="city" placeholder="Enter City" style="width: 100%">
    <div class="amtcheckbox"><input type="checkbox" name="25kto50k">25000 - 50000</div>
    <div class="amtcheckbox"><input type="checkbox" name="50kto100k">50001 - 100000</div>
    <div class="ratecheckbox"><input type="checkbox" name="12to15">12% - 15%</div>
    <div class="ratecheckbox"><input type="checkbox" name="16to20">16% - 20%</div>
    <div class="tenurecheckbox"><input type="checkbox" name="6months">6 Months</div>
    <div class="tenurecheckbox"><input type="checkbox" name="12months">12 Months</div>
</form>

The filter if applied will have at least one or more of the conditions.

This is my first question here. Please let me know if I'm missing something, will improve on next questions.

Answer 1

You can achieve this using a pipe on your *ngFor. The pipe would need to take each one of your checkbox values in as a series of args. Then you would use those args to reduce the result set down based on your criteria. Here is a plunkr if you need more details. The syntax to add a pipe to a *ngFor looks like this

*ngFor="let people of peopleCollection | customFilterPipe:hasFeetChckbx:hasScooterChckbx:hasBikeChckbx:hasCarChckbx"

Each ":" seperates each arg going into the pipe. The pipe transform method signature will look like this

transform(_initialCollection: People[], _hasFeet: boolean, _hasScooter:boolean, _hasBike:boolean, _hasCar:boolean)

_initialCollection is the data from the *ngFor collection, all parameters after that are being passed from the *ngFor in each ":".