Filtering data using Angular and checkboxes

Question

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 ?

Product-list.HTML

<div class="category-container">
<div class="wrapper">
    <h2>Cotton</h2>
    <div class="form-check">
      <input type="checkbox">
      <label for="defaultCheck1" class="form-check-label">
        Cotton
      </label>
    </div>
  </div>
</div>

<div class="container">
  <div class="row align-items-start">
    <div *ngFor="let product of products"  class="col-6">
      <app-product-card [product]="product" ></app-product-card>
    </div>
  </div>
</div>

Product-list.component.ts

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[]) => {
      this.products = products;
    }, error => {
      console.log(error);
    });
  }
}

Balaj Khan · Accepted Answer · 2020-03-25 08:16:10Z

1

Use Filter to filter on the basis of the checkbox event.

loadProducts() {
   this.productService.getProducts().subscribe((products: Product[]) => {
      this.products = products;
      let a = this.products.filter(e => e.filtercondition == checkboxInput);
      this.products = a;
   }, error => {
      console.log(error);
   });
}

edited Mar 25, 2020 at 8:16

Balaj Khan

2,6103 gold badges20 silver badges30 bronze badges

answered Mar 10, 2019 at 15:13

Muhammad Abdullah

4828 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FreeSock Over a year ago

Thanks a lot! The only problem i face is that it always seems to be filtered. Maybe im doing the checkboxInput event wrong ? const a = this.products.filter(e => e.material === this.cotton); this.products = a;

Collectives™ on Stack Overflow

Filtering data using Angular and checkboxes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related