I'm trying to figure out how to display all identifier values(material table rows) if the ALL checkbox is checked. My current setup filters the rows based on identical values but the 'ALL' keyword is not an actual value in the material table.

I think the fix would need to happen here meaning if ALL is checked return [...data]

 if (
   !this.identifierFilterValue ||
   this.identifierFilterValue.length === 0
    ) {
   console.log('No Identifier Filters are selected return full data');
   return [...data];
  }

How to test: When the page loads click the search button then toggle the ALL checkbox a few times. When it's unchecked all rows appear. However I want all the rows to appear if ALL is checked.

Here is my stackblitz.

I'm trying to figure out how to display all identifier values(material table rows) if the ALL checkbox is checked. My current setup filters the rows based on identical values but the 'ALL' keyword is not an actual value in the material table.

I think the fix would need to happen here meaning if ALL is checked return [...data]

 if (
   !this.identifierFilterValue ||
   this.identifierFilterValue.length === 0
    ) {
   console.log('No Identifier Filters are selected return full data');
   return [...data];
  }

How to test: When the page loads click the search button then toggle the ALL checkbox a few times. When it's unchecked all rows appear. However I want all the rows to appear if ALL is checked.

Here is my stackblitz.

• javascript
• angular
• angular-material
• angular-reactive-forms

1 Answer 1

We can simplify the code to just two if conditions that handle the exclusive checkbox condition.

1. If ALL selected then one of the checkbox is selected.

2. If one of the checkbox is selected then ALL selected.

Discard the emitEvent: false, because the latest value updates are not reflecting in the valueChanges.

handleCheckboxSelection(previousValues: any, values: any) {
  const filterGroupCtrl = this.reportListFG.get('filterGroup');
  if (
    previousValues.ALL &&
    (values.Checkbox1 || values.Checkbox2 || values.Checkbox3)
  ) {
    filterGroupCtrl.patchValue({
      ALL: false,
    });
  } else if (
    values.ALL &&
    (previousValues.Checkbox1 ||
      previousValues.Checkbox2 ||
      previousValues.Checkbox3)
  ) {
    filterGroupCtrl.patchValue({
      Checkbox1: false,
      Checkbox2: false,
      Checkbox3: false,
    });
  }
  this.populateIdentifierFilterValue();
}

We can write a function, that will recalculate the identifierFilterValue once during on load and again on each value change.

populateIdentifierFilterValue() {
  const filterGroupCtrl = this.reportListFG.get('filterGroup');
  this.identifierFilterValue = Object.keys(filterGroupCtrl.value).filter(
    (key: any) => filterGroupCtrl.value[key]
  );
}

When no filters are selected, make sure you return an empty array.

applyFilter(): void {
  console.log('mockData************', this.mockData);
  if (!this.mockData || this.mockData.length === 0) {
    console.error('No Data to Filter');
    return;
  }

  let filteredData = [...this.mockData]; // Create a copy of the original mockData

  filteredData = this.filterByIdentityCheckbox(filteredData);

  //try filter predicate
  //this.dataSource.filterPredicate = this.createFilter(); // Update the filter predicate
  //this.dataSource.filter = 'triggerFilter'; // Trigger the filter

  console.log('Filtered Data ', filteredData);
  if (this.dataSource) {
    this.dataSource.data = filteredData;
    this.dataSource.paginator = this.paginator; // Assign paginator here
  }
  if (this.dataSource && this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
  }
}

Finally, we can write a condition so that, when ALL is selected, we return all the items.

filterByIdentityCheckbox(data: any[]): any[] {
  console.log(
    '******Applying filter by identifierFilterValue:',
    this.identifierFilterValue
  );

  if (
    !this.identifierFilterValue ||
    this.identifierFilterValue.length === 0
  ) {
    console.log('No Identifier Filters are selected return full data');
    return [];
  }

  return data.filter((item) => {
    if (this.identifierFilterValue.indexOf('ALL') > -1) {
      return true;
    }
    console.log('Checking item identifier:', item.identifier);

    if (this.identifierFilterValue.indexOf(item.identifier) !== -1) {
      console.log('Matched identifier:', item.identifier);
      return true;
    } else {
      console.log('Identifier not matched', item.identifier);
      return false;
    }
  });
}

Stackblitz Demo