I have a set of data in which is filtering by checkbox. However it only works one time. For example. I have 2 distinct company If I check company it filters and shows two rows and I uncheck it shows all rows which is good. But if I check it again it doesn't filter. Seems like I have some sort of state management or data binding problem. Here is my apply filter method that shows me trying to use filter predicate and also trying to filter manually.

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; // Start with the full data

if (this.identifierFilterValue && this.identifierFilterValue.length > 0) {
  filteredData = this.filterByIdentityCheckbox(filteredData);
}

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();
 }
}



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 [...data];
}

return data.filter((item) => {
  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;
  }
});
}
}

I've also tried includes instead of indexOf

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 [...data];
}

return data.filter(item => {
  console.log('Checking item identifier:', item.identifier);

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

I have a parent component, filter component, and view table component.
I read something about using lodash as ngOnChanges doesn't work the second time...let me do some reading.

Here is my stackblitz

I have a set of data in which is filtering by checkbox. However it only works one time. For example. I have 2 distinct company If I check company it filters and shows two rows and I uncheck it shows all rows which is good. But if I check it again it doesn't filter. Seems like I have some sort of state management or data binding problem. Here is my apply filter method that shows me trying to use filter predicate and also trying to filter manually.

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; // Start with the full data

if (this.identifierFilterValue && this.identifierFilterValue.length > 0) {
  filteredData = this.filterByIdentityCheckbox(filteredData);
}

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();
 }
}



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 [...data];
}

return data.filter((item) => {
  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;
  }
});
}
}

I've also tried includes instead of indexOf

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 [...data];
}

return data.filter(item => {
  console.log('Checking item identifier:', item.identifier);

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

I have a parent component, filter component, and view table component.
I read something about using lodash as ngOnChanges doesn't work the second time...let me do some reading.

Here is my stackblitz

• javascript
• angular
• angularjs
• angular-material
• 2-way-object-databinding

1 Answer 1

The problem is that the reference to identifierFilterValue doesn't change (it's the same array, but with new values), so the input of ReportsViewTableComponent is not updated.

Here is the problematic code in the IdentifierFilter component:

onIdentifierSelectionChange(event: MatCheckboxChange, formType: string) {
  if (event.checked) {
    this.selectedFormTypes.push(formType);
  } else {
    this.selectedFormTypes = this.selectedFormTypes.filter(type => type !== formType);
  }

  console.log('Selected Filters to Parent:', this.selectedFormTypes);
  this.identifierFilterChanged.emit(this.selectedFormTypes);
}

You need to write something like this:

this.identifierFilterChanged.emit([...this.selectedFormTypes]);