title: Filtering data using Angular and checkboxes
body: <p>I'm trying to figure how can you filter given products based on the material with a checkbox ? Should i be using pipes ? Should i be using only filter ?</p>
  
  <p><strong>Product-list.HTML</strong></p>
  
  <pre><code>&lt;div class="category-container"&gt;
  &lt;div class="wrapper"&gt;
      &lt;h2&gt;Cotton&lt;/h2&gt;
      &lt;div class="form-check"&gt;
        &lt;input type="checkbox"&gt;
        &lt;label for="defaultCheck1" class="form-check-label"&gt;
          Cotton
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row align-items-start"&gt;
      &lt;div *ngFor="let product of products"  class="col-6"&gt;
        &lt;app-product-card [product]="product" &gt;&lt;/app-product-card&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Product-list.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { ProductService } from 'src/app/_services/product.service';
  import { Product } from 'src/app/_models/product';
  
  @Component({
    selector: 'app-product-list',
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.css']
  })
  export class ProductListComponent implements OnInit {
    @Input() product: Product;
    products: Product[];
  
    constructor(private productService: ProductService) { }
  
    ngOnInit() {
      this.loadProducts();
    }
  
    loadProducts() {
      this.productService.getProducts().subscribe((products: Product[]) =&gt; {
        this.products = products;
      }, error =&gt; {
        console.log(error);
      });
    }
  }
  </code></pre>