Angular checkbox filter using pipe

Question

Hello I am trying to create a checkbox angular pipe which can filter my products when checked. The checklist comes dynamically and so is the list from the same JSON file -

Checkbox - The following code creates checkboxes in the component

<div *ngFor="let b of prod.brand">
  <input type="checkbox" value="{{b.BrandName}}" id="{{b.id}}" name="brandArray" [(ngModel)]="b[BrandSelected]">
  <label for="{{b.id}}">{{b.BrandName}}</label>
</div>

List of Products - The following code is used to get the product list

<div *ngFor="let prod of productListShow">
<div class="col-md-4" *ngFor="let product of prod.product | selectBrand: brandType">
<div class="sp-list-inner">
<figure>
    <a href="#" target="_blank">
        <img src="{{product.productImage}}" alt="{{product.productImageAlt}}">
        <figcaption>
            <h5 class="product-inner-title">{{product.productName}}</h5>
        </figcaption>
    </a>
</figure>
</div>
</div>
</div>

Checkbox Pipe - The following code is I am facing problem with to filter the products when a particular checkbox is selected

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'selectBrand'
})
export class SelectBrandPipe implements PipeTransform {

  transform(brand: any, brandType?: any): any {
    console.log('brand', brandType);
    if (!brandType || brandType.length === 0) return brand;
    return brand.filter(brandName => 
    brandType.includes(brandName.companyName));
  }

}

I am using this list which is called by a service. In that service I have used productList: Products[]; for the following list -

export const PRODUCTS: Products[] = [
{
    id: 1,
    productCat:'Jeans',
    brand: [
        {
            brandId: 'B1',
            BrandName: 'Brand-1',
            BrandSelected: true
        },
        {
            brandId: 'B2',
            BrandName: 'Brand-2',
            BrandSelected: true
        },
    ],
    product: [
        {
            productId: 2,
            productName: 'Brand 2 prod',
            companyName: 'Brand-1',
        },
        {
            productId: 3,
            productName: 'Brand 2 prod',
            companyName: 'Brand-2',
        },
    ],
},
]

Please advice how can I correct this. If there is also other method than pipe, please do share

Answer 1

brandType is undefined in the component. Check your component file (ending in .ts) and see if brandType is defined (it shouldn't be).

Testing this hypothesis would be easiest, by just passing in some string to the pipe and seeing, if it would then say something other than undefined.

aka.

<div class="col-md-4" *ngFor="let product of prod.product | selectBrand: 'car-brand'">

if it would then log "brand car-brand" from the console.log in the pipe, then you would definately know that there is a problem with initializing your brandType variable.

EDIT 1:

Most commonly you initialize and modify your variables in the component. Aka.

@Component..
export class ComponentA implements OnInit {
    public brandType: string = 'car';

    ngOnInit() { }
}