Search code examples
angularangular5ngforangular-pipe

Angular Pipe not detecting changes with multiple arguments

So in short I have:

  1. An ngFor displaying an array of cars:

    <div class="carContainer" *ngFor="let car of 
cars | carFilter: brand : color">

  2. Search box which is the first argument of the filter.

    <input type="text" class="form-control" 
placeholder="Search car brand" [(ngModel)]="searchInput">

  3. Select box which is the second argument.

    <select class="form-control" [(ngModel)]="color">
  <option value="red">red</option>
  <option value="blue">blue</option>
  <option value="black">black</option>
  <option value="orange">orange</option>
</select>

When I type something in the search bar the filter triggers. I've also confirmed that the value from the select box passes to carFilter. The problem is... when I change value in the select box alone the filter carFilter doesn't trigger.

If I remove the searchBar argument from the filter then the changes in the select box will trigger the filter. How do I make the pipe detect changes in both/multiple arguments?

Solution

  • Alright after a few trial and errors I figured it out. If you want triggers for multiple arguments such as a sortBoxInput and searchBoxInput, you have to make two separate filters. I guess it's obvious for those who are more used to angular but I'm a newbie.

    So I split my single filter into two, which are searchFilter and sortFilter.

    Then I changed the html to:

        <div class="carsContainer" 
    *ngFor="let car of cars | searchFilter : brand | sortFilter : color">