Filter array by array with true or false value Angular

Question

A have a client class I have a column with a sting column isSimple 'TAK' or 'NIE' (YES or NO in English) in my Class. In this class a have an argument a Canal and this class I have an argument 'Procudent' or 'Handel'. In my Reactive Form a have a form where a may a filter a Producent, Handel and Simple and I send this information to my HomeController. Now I want to filter this clients where I clicked true in my input near Handel, Producent or Simple by this columns.

My code is:

I recive this data in my HomeController array:

 [
    { name: "Producent", checked: true },
    { name: "Handel", checked: true },
    { name: "Simple", checked: true }
  ];

My class client:

export class Client {
    clientId: number;
    name: string ;
    district: string;
    province: string;
    zip: string;
    city: string;
    full_Address: string;
    latitude: number;
    longitude: number;
    segment: string;
    ph: string;
    bh: number;
    canal: string;
    isSimple: string;
}

I send through this class:

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { IBox } from 'src/app/Models/IBox';

@Component({
  selector: 'app-type-of-client',
  templateUrl: './type-of-client.component.html',
  styleUrls: ['./type-of-client.component.css']
})
export class TypeOfClientComponent implements OnInit {
  box_data: IBox[] = [
    { name: "Producent", checked: true },
    { name: "Handel", checked: true },
    { name: "Simple", checked: true }
  ];

  @Output() typeOfClient = new EventEmitter<{}>();


  form_model: FormGroup = this.fb.group({
    search_text: this.fb.control(""),
    boxes: this.fb.array(
      this.box_data.map((box: IBox) => {
         return this.fb.group({ checked: [box.checked],name:[box.name] });
      })
    )
  })

  constructor(private fb: FormBuilder) { }

  get boxes() {
    return this.form_model.get("boxes") as FormArray;
  }

  ngOnInit(): void {
          this.boxes.valueChanges.subscribe(
              (response) =>{

                let clients : IBox[] =[];
                for (let index = 0; index < response.length; index++) {
                  const element = response[index];
                  clients.push(element);
                }

                // let clients : IBox[] = this.box_data;
                this.typeOfClient.emit(clients);
              }
    );
  }
}

And now a want to try use method method include but it doesn't work. I filter like this my client throung another argument.

 filterClients() {
    console.log(this.checkedPH);
    console.log(this.checkedSegment);

    const typeClient = this.checkedTypeOfClient


    this.currentClientList = this.baseClientList;
    this.currentClientList = this.currentClientList.filter(client => {
       return this.checkedSegment.includes(client.segment) && this.checkedPH.includes(client.ph);

    });

  }

Answer 1

In general you has a parent component that received the value

<!--see that you received the output using "$event"-->
<app-type-of-client (typeOfClient)="filter($event)"></app-type-of-client>

if your parent component I mush suppose you has an array with all the clients, use an auxiliar variable filterClients

allClients:Clients[];
filterClients:Clients[]=[]

The problem is that you received an strange object. I'm going to transform this response before make the filter

So, create a function

    filter(response:any[]){
        const filter={
           Producent:response.find(x=>x.name="Producent").checked
           Handel:response.find(x=>x.name="Handel").checked
           Simple:response.find(x=>x.name="Simple").checked
        }

        this.filterClients=this.allClients.filter(x=>(x.canal=="Producent" && filter.Producent) &&
                                                     (x.canal=="Handel" && filter.Handel) &&
            ((x.Simple=="TAK" && filter.Simple) || (x.Simple=="NIE" && !filter.Simple)))
    }

And iterate over filterClients.

NOTE: if you always received the three values and the values are in order. Some like

this.boxes.valueChanges.subscribe(res=>{
  this.typeOfClient.emit(res.map(x=>x.checked)) //<--this emit, e.g. [true,false,true]
})

You can filter like

    filter(response:any[]){
        this.filterClients=this.allClients.filter(x=>(x.canal=="Producent" && response[0]) &&
                                                     (x.canal=="Handel" && response[1]) &&
            ((x.Simple=="TAK" && response[2]) || (x.Simple=="NIE" && !response[2])))
    }