title: Angular checkbox filter for products
body: <p>Hello I am trying to create an ecommerce page on angular where the products are shown with the checkbox option to filter the products. However I am not able to make the checkbox filter work properly as it is showing all the data. Please help.</p>
  
  <p>Here is my stackblitz link - <a href="https://stackblitz.com/edit/angular-checkbox-list" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-checkbox-list</a></p>
  
  <pre><code>&lt;div class="brand-select"&gt;
  &lt;div class="brand-name"&gt;Select Color&lt;/div&gt;
  &lt;form&gt;
      &lt;div class="form-check brand-checkbox" *ngFor="let col of colors;let index = index"&gt;
          &lt;input class="form-check-input" 
               type="checkbox" 
               value="{{col.id}}" 
               id="{{col.id}}" 
               name="checkbox" 
               [(ngModel)]="col.selected"
               (ngModelChange)="filterProducts()"&gt;
  
            &lt;label class="form-check-label" for="{{col.id}}"&gt;
              {{col.productColor}}
            &lt;/label&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div *ngFor="let prod of productListShow"&gt;
      &lt;div *ngFor="let product of prod.product"&gt;
          &lt;h5 class="product-inner-title"&gt;{{product.productName}}&lt;/h5&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my component <code>.ts</code> file -</p>
  
  <pre><code>public colors: any[] = [
  {
    id: 1,
    productColor: "Black",
    selected: false,
  },
  {
    id: 2,
    productColor: "Green",
    selected: false,
  }
  ]
  constructor(private productservice: ProductService) { }
  
  ngOnInit() {
   this.productList = this.productservice.getProducts();
   this.productListShow = this.productList; 
  }
  
    public filterProducts(): void {
    const filteredProductArray = new Array&lt;any&gt;();
    const activeColors = this.colors.filter(c =&gt; c.selected).map(c =&gt; c.productColor);
    this.productList.forEach(prod =&gt; {
        const filteredSubProducts = prod.product.filter(p =&gt; activeColors.includes(p.productColor));
         if(filteredSubProducts.length &gt; 0){
             const clonedProduct = Object.assign({}, prod);
             clonedProduct.product = filteredSubProducts;
             filteredProductArray.push(clonedProduct);
         }
    });
    this.productListShow = filteredProductArray;
    console.log(this.productListShow);
  }
  </code></pre>
  
  <p>I am getting the data for my products from a service <code>ProductService</code> here is the data for the products -</p>
  
  <pre><code>import { Products } from './products';
  export const PRODUCTS: Products[] = [
      {
          id: 1,
          productCat:'Jeans',
          product: [
              {
                  productId: '1',
                  productName: 'Trendy Jeans',
                  productColor: 'Green',
              },
              {
                  productId: '2',
                  productName: 'Black tapered Jeans',
                  productColor: 'Black',
              },
          ],
      },
      {
          id: 2,
          productCat:'Shirts',
          product: [
              {
                  productId: '1',
                  productName: 'Trendy Shirts',
                  productColor: 'Green',
              },
              {
                  productId: '2',
                  productName: 'Black Shirts',
                  productColor: 'Black',
              },
          ],
      },
  ]
  </code></pre>
  
  <p>So When I check green color, it filters all the green color data, i.e shows the green products both from <code>productCat</code> Jeans and Shirts. I only want to show the green color products for jeans if I am showing only jeans data. Please help.</p>
  
  <p>Here is the stackblitz link again - <a href="https://stackblitz.com/edit/angular-checkbox-list" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-checkbox-list</a></p>