How to filter array by Boolean in Angular?

Question

Hi there I am very new to Angular and am currently working on a way to sort an array that is created using *ngFor.

I would like to be able to use input checkboxes to filter. I have set properties on the objects for instance...

PersonalInvestment: boolean; This is to define the type but based on what this boolean value is I would either want to show or hide the object from the array. I have been following Deborah Kurata's course on Pluralsight and in her tutorial she filters an array based on a string value she types into her input bar.

This is the get and set code she uses along with her function to filter:

  get listFilter(): string {
    return this._listFilter;
  }
  set listFilter(value: string) {
    this._listFilter = value;
    this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
  }

and the function performFilter further down in the component:

performFilter(filterBy: string): IProduct[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.products.filter((product: IProduct) =>
      product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
  }

So with my limited knowledge I have tried to use a similar approach:

  _personalFilter: boolean;
    get personalFilter(): boolean {
        return this._personalFilter;
    }
    set personalFilter(value: boolean){
        this._personalFilter = value;
        this.filteredBrands = this.personalFilter ? this.performFilter(this.personalFilter) : this.brands;
    }

and my function:

    performFilter(filterBy: boolean): Brands[] {
        return this.brands.filter((brand: Brands) =>
            brand.PersonalInvestment.valueOf = function () {
                return this.filterBy;
            });
  }

I am currently getting this error:

I obviously know my code is fundamentally wrong but this is a brand new concept for me and I nothing on StackOverflow has helped me so far. Thank you so much in advance.

EDIT:

This is my input box:

<input type="checkbox" name="Personal" value="Personal" [(ngModel)]="personalFilter"/> Personal<br />

and this is the start of the div for the *ngFor:

<div *ngFor="let brand of filteredBrands">

Answer 1

I managed to figure out a way to filter my list by input box:

This is an example of one of the input boxes in my HTML:

<input type="checkbox" name="Personal" value="Personal" [(ngModel)]="Personal" (change)="checkValue(Personal, property='personal')" /> Personal<br />

Then in my JSON I have a list of properties attached to each card that I am trying to filter like so:

   {
        "Id": 5,
        "Title": "5th Brand Test With Advanced Property",
        "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
        "Properties": ["personal", "listedItems"],

   },

Then I filter it in the following way in my component:

brands: ExploreCards.IBrand[];
visibleBrands: ExploreCards.IBrand[] = [];
filteredProperties = [];

checkValue(event: any, property: string) {

    if (event == true) {
      this.filteredProperties.push(property);
      for (var i = this.filteredProperties.length - 1; i >= 0; i--) {
        if (this.filteredProperties[i] == property) {
          this.visibleBrands = this.brands.filter(item => item.Properties.some(property => this.filteredProperties.indexOf(property) > -1));

        }
      }
    } else {
      for (var i = this.filteredProperties.length - 1; i >= 0; i--) {
        if (this.filteredProperties[i] == property) {
          this.filteredProperties.splice(i, 1);
        }
      }
      this.visibleBrands = this.brands.filter(item => item.Properties.some(property => this.filteredProperties.indexOf(property) > -1));
    }
    if (this.filteredProperties.length === 0) {
      this.visibleBrands = this.brands;
    }
  }


  ngOnChanges() {
    this.visibleBrands = this.brands.slice(0);
  }

  ngOnInit(): void {
    this.brands = this.brandService.getBrands();
    this.visibleBrands = this.brands;
  }

Hopefully this helps someone else in the future! :)