title: Filter table in Angular
body: <p>I have a table with two filter options "Gender" and "Country"! Essentially the filter works, that is I click on the gender dropdown for male or female and the table shows me all the the entries. My issue is, with the way that I have done, I always have to refresh(as in reload the data) the table before I can filter again. Say I have filter for females, I can't directly click on male to show me the male entries, I have to refresh and then I can only filter again. I'm sure its only a matter of one or two lines of code but I just can't seem to figure it out. </p>
  
  <p>Below my methods:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>filterByGender(event) {
      let gender = event;
      if (gender === "Male") {
        gender = "M";
      } else if (gender === "Female") {
        gender = "F";
      }
      let filteredGender = this.customerArray
        .filter(customer =&gt; customer.gender === gender);
      console.log("filteredGender", filteredGender);
      this.customerArray = filteredGender;
  
    }
  
    filterByCountry(event) {
      let country = event;
      let filteredCountry = this.customerArray
        .filter(customer =&gt; customer.countryCode === country);
      this.customerArray = filteredCountry;
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>this.customerArray is the array of all the customers from the backend. Now the reason its not working the way I want to is because I refill the array so I can't do a second filter, but what would be a way around this? </p>