title: Angular filtering items in array by 2 criteria
body: <p>I created sorting sidebar which filter my product list based on category and price. Filtering by category works correctly.  <a href="https://i.stack.imgur.com/kPs7E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kPs7E.png" alt="sidebar"></a>
  I have a problem with filtering based on the price of the product.If I set the category to "Smartfons" and filter a product with a price higher than 2000, it will return Iphone X correctly in my case:<a href="https://i.stack.imgur.com/fazYm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fazYm.png" alt="Price more than 2000"></a>
  but when I change the filter to "All" I have this one phone and It should return 3 phones:<a href="https://i.stack.imgur.com/Fvphl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fvphl.png" alt="All smartfons"></a></p>
  
  <pre><code>    export class ProductComponent implements OnInit {
    filteredProduct: Products[] = [];
    products: Products[] = [];
    currentSorting: string;
    wrapper = true;
    @ViewChild('filtersComponent')
    filtersComponent: SortProductsComponent;
  
    constructor(protected productsService: CategoriesProductsService) { }
  
      sortFilters: any[] = [
        { name: 'Name (A to Z)', value: 'name' },
        { name: 'Price (low to high)', value: 'priceAsc' },
        { name: 'Price (high to low)', value: 'priceDes' }
      ];
      priceFilters: any[] = [
        { name: 'All', value: 'all', checked: true },
        { name: 'Price &gt; 2000', value: 'more_2000', checked: false },
        { name: 'Price &lt; 500', value: 'less_500', checked: false }
      ];
  
    ngOnInit() {
      this.displayProducts();
    }
    displayProducts() {
      this.productsService.getProducts().subscribe(product =&gt; {
        this.products = product;
        this.filteredProduct = product; });
      }
  
      onFilterChange(data) {
        if (data.type === 'category') {
        if (data.isChecked) {
            // tslint:disable-next-line:prefer-for-of
            for (let i = 0; i &lt; data.filter.Products.length; i++) {
            this.filteredProduct.push(data.filter.Products[i]);
            }
          } else {
            this.filteredProduct =
            this.products.filter(x =&gt; {
              return x.CategoryId !== data.filter.Id; } );
          }
        } else if (data.type === 'price') {
          this.filteredProduct = this.products;
          if (data.isChecked) {
            const priceFilter = data.filter.value;
            if (priceFilter === 'all') {
                this.filteredProduct = this.products;
            } else if (priceFilter === 'more_2000' ) {
  
                this.filteredProduct = this.products.filter(x =&gt; x.Price &gt; 2000);
  
            } else if (priceFilter === 'less_500' ) {
  
                  this.filteredProduct = this.products.filter(x =&gt; x.Price &lt; 500);
            }
          }
        }
      }
  </code></pre>
  
  <p><strong>SortProductComponent:</strong></p>
  
  <pre><code>   export class SortProductsComponent implements OnInit {
    categoriesList: Categories[];
    @Input()
    priceFilters: any[];
    // tslint:disable-next-line:no-output-on-prefix
    @Output()
    onFilterChange = new EventEmitter&lt;any&gt;();
    showFilters = true;
    sideShown = false;
    constructor(private categoriesService: CategoriesProductsService) { }
  
    ngOnInit() {
      this.displayCategories();
    }
    displayCategories() {
      this.categoriesService.getCategories().subscribe((data) =&gt; {
       this.categoriesList = data;
  
      });
    }
    onInputChange($event, filter, type) {
      const change = $event.target.checked ? 1 : -1;
      this.onFilterChange.emit({
        type,
        filter,
        isChecked: $event.target.checked,
        change
      });
  }
  }
  </code></pre>
  
  <p><strong>HTML template:</strong></p>
  
  <pre><code>   &lt;h5&gt;Filter by categories&lt;/h5&gt;
    &lt;form &gt;
        &lt;div class="category-filter filter-wrapper" *ngFor = 'let filter of categoriesList'&gt;
          &lt;div class="custom-control custom-checkbox"&gt;
              &lt;label class="fake-checkbox"&gt;
                &lt;input type="checkbox" class="custom-control-input" checked (change)='onInputChange($event, filter, "category")'&gt;
                &lt;span class="custom-control-label"&gt;  {{filter.Name}}&lt;/span&gt;
                &lt;span&gt;&lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;h5&gt;Filter by price&lt;/h5&gt;
  &lt;form *ngIf = "showFilters"&gt;
      &lt;div class="custom-filter filter-wrapper" *ngFor = 'let filter of priceFilters'&gt;
          &lt;label class="fake-checkbox"&gt;
            &lt;input type="radio" name="price" [checked]='filter.checked' (click)='onInputChange($event, filter, "price")'&gt;
            &lt;span class="circle"&gt;&lt;span class="fill"&gt;&lt;/span&gt;&lt;/span&gt;
            &lt;span class="label"&gt;{{filter.name}}&lt;/span&gt;
            &lt;span&gt;&lt;/span&gt;
          &lt;/label&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>Product class:</strong></p>
  
  <pre><code>export class Products {
    Id: number;
    Name: string;
    Description: string;
    DetailedDescription: string;
    Price: number;
    IsNewProduct: boolean;
    PromotionalProduct: boolean;
    Image: string;
    CategoryId: number;
  }
  </code></pre>
  
  <p>I think that by using the filter () method, which returns a new array to me, the filter on the array works only once.<br/><br/>
  I would like my category and price filter to work just like on this page: <a href="https://carlosroso.com/angular2-shop" rel="nofollow noreferrer">https://carlosroso.com/angular2-shop</a><br>
  <br/>Any help is welcome</p>