title: Multiple search filters in angular
body: <p>I have created 3 search fields: 1. Name.... 2. Subject....  3.Price....<br> All of them are working good if considered separately. eg. from a list of elements if I search by name, I get all the results from that name or if I search by Subject, I get all the results of that subject and the same for price also.<br><br><strong>But the problem is I don't know how to make all the filters work simultaneously for me i.e. If I want a person named &quot;BOB&quot; who can teach &quot;English&quot; at price &quot;500-600&quot;</strong>. How to achieve this link between multiple filters
  <a href="https://i.stack.imgur.com/CV8ji.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CV8ji.png" alt="This is the image of my filter" /></a></p>
  <p><strong>component.ts<br> filterSearch an array that contains all the data of the users and tempFilterSearch is used to show it at html<br></strong></p>
  <pre><code>searchSubject($event) {
      this.subject = $event.target.value;
      if(this.price == null){
          this.tempFilterSearch = this.filterSearch.filter((res) =&gt; {         
              return (                    
                  res.subject1.toLocaleLowerCase().match(this.subject.toLocaleLowerCase()) ||
                  res.subject2.toLocaleLowerCase().match(this.subject.toLocaleLowerCase()) ||
                  res.subject3.toLocaleLowerCase().match(this.subject.toLocaleLowerCase())
                  );
              });
      }else if(this.price != null){
          this.tempFilterSearch = this.filterSearch.filter((res)=&gt;{
              console.log(res);
              if((Number(res.price1))&gt;=(Number(this.lowerValue))
                  &amp;&amp;(Number(res.price1))&lt;=(Number(this.higherValue)) 
                  &amp;&amp;(res.subject1.match(this.subject)) || (res.subject2.match(this.subject))|| (res.subject3.match(this.subject))){
                      return res.subject1 || res.subject2 || res.subject3;
              }
          })
      }
  
  searchName() {  
      this.tempFilterSearch = this.filterSearch.filter((response)=&gt;{
          return response.fullName.toLocaleLowerCase().match(this.name.toLocaleLowerCase());
      })
      
  }
  
  searchPrice($event) {
      this.price = $event.target.value.split(&quot;-&quot;);
      this.lowerValue = this.price[0];
      this.higherValue = this.price[1];
      if (this.subject == null) {
          this.tempFilterSearch = this.filterSearch.filter((res) =&gt; {
              if((Number(res.price1))&gt;=(Number(this.lowerValue))&amp;&amp;(Number(res.price1))&lt;=(Number(this.higherValue)))
                  return res.price1.toLocaleLowerCase();
              });
      }else if(this.subject != null){
          this.tempFilterSearch = this.filterSearch.filter((res)=&gt;{
              if((Number(res.price1))&gt;=(Number(this.lowerValue))
                  &amp;&amp;(Number(res.price1))&lt;=(Number(this.higherValue)) ){
                      return res.price1.toLocaleLowerCase();
              }
          })
      }
  }
  </code></pre>
  <p><strong>component.html</strong></p>
  <pre><code> &lt;div class=&quot;tutorWrapper&quot; *ngFor=&quot;let element of tempFilterSearch&quot;&gt;
  </code></pre>
  <p><strong>What I want is a solution so that all the filters can work simultaneously.</strong></p>