Angular text field searh pipe eliminates array elements when combined with filter based on checkboxes

Good morning,

I have an angular page where I filter by text and by checkboxes as well.

• If checkbox A is selected then list all the items starting with A.
• If chechlox O is selected list all other items
• If both selected list all
• and of course at the same time take into account the text box filter as well.

By default both checkboxes are marked and if user types something in the textbox the filter works correctly, when the filter text is removed then i get back the complete list of tasks.

Now, when one of the checkboxes are unmarked i get the correctly filtered list, but when the box is marked again I don't get back the complet list. If the content of the list is visualized on the console then I can see that the content has been reduced to the fitlered values only.

Any idea why the array elements are removed in this second case and not in the first case?

Here is the code of the search pipe and below the html and the component file.

The search-filter.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
import { TaskService } from './tasks/task.service';

@Pipe({
  name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {

  constructor(private taskService:TaskService){}
  transform(items: any, stringToSearch: string): any {

    console.log(items)
   if (!items) return items;

   return items.filter((s)=>{

     //WE ARE FILTERING HERE BY THE TEXTBOX ONLY. IN THIS CASE ITEMS ARRAY CONTENT IS NOT REDUCED. 
     //DELETING FILTER CONTENT GIVES BACK THE COMPLETE LIST.
      if ((this.taskService.getTitleFilterA() 
          && this.taskService.getTitleFilterO()) ||
      (!this.taskService.getTitleFilterA() 
        && !this.taskService.getTitleFilterO()))
      {

        if (stringToSearch)
        {
          return  s.name.toLowerCase().includes(stringToSearch.toLowerCase());
        }
        else
          return true;
      }

     //WE ARE FILTERING FROM HERE BY CHECKBOXES AS WELL. 
     //IN THIS CASE ITEMS ARRAY CONTENT IS REDUCED EACH TIME A TEXTBOX FILTER IS CLICKED 

      if (this.taskService.getTitleFilterA() 
          && !this.taskService.getTitleFilterO())
      {
        if (stringToSearch)
        return s.name.toLowerCase().startsWith("a") && s.name.toLowerCase().includes(stringToSearch.toLowerCase())
        else
          return s.name.toLowerCase().startsWith("a")
      }
      if (!this.taskService.getTitleFilterA() 
          && this.taskService.getTitleFilterO())
      {
          if (stringToSearch)
         {
            return !s.name.toLowerCase().startsWith("a") && s.name.toLowerCase().includes(stringToSearch.toLowerCase())
         }
        else
        {
          return !s.name.toLowerCase().startsWith("a")
        }
      }
   });
  }
}

The relevant html code from task-list.component.html:

  <input [(ngModel)]="searchText" />
  Zakum wells:
    <input type="checkbox"
      [(ngModel)]="isAChecked"
      (change)="checkBoxAClicked(isAChecked)"/>&nbsp;&nbsp;
  Other wells:
    <input type="checkbox"
    true
      [(ngModel)]="isOChecked"
      (change)="checkBoxOClicked(isOChecked)"
      />
<div class="row">
  <div class="col-xs-12">
    <button
      class="btn btn-success"
      [routerLink]="['new']">New Task</button>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12">
    <app-task-item
      *ngFor="let taskitem of tasks | searchFilter: searchText; let i = index"
      [task]="taskitem"
      [index]="i">
    </app-task-item>
  </div>
</div>

The complete task-list.component.ts:

import { Component, OnInit } from '@angular/core';
    import { Task } from '../task.model';
    import { TaskService } from '../task.service';
    
    import {SearchFilterPipe} from "../../search-filter.pipe"
    @Component({
      selector: 'app-task-list',
      templateUrl: './task-list.component.html',
      styleUrls: ['./task-list.component.css']
    })
    export class TaskListComponent implements OnInit{
      tasks:Task[];
      searchText:string;
      isAChecked:boolean=true;
      isOChecked:boolean=true;
    
    
      constructor(private taskService:TaskService, private searchFilterPipe:SearchFilterPipe){
      }
    
      ngOnInit(): void {
        this.tasks=this.taskService.getTasks();
      }
    
      checkBoxAClicked(checked:boolean)
      {
       this.taskService.setFilterA(checked);
       this.tasks = this.searchFilterPipe.transform(this.tasks , this.searchText);
      }
    
      checkBoxOClicked(checked:boolean)
      {
       this.taskService.setFilterO(checked);
       this.tasks = this.searchFilterPipe.transform(this.tasks , this.searchText);
      }
    }