Emmiter array return wrong

I am trying to send myself from child to parntent the data that I am broadcasting. This is supposed to be the whole table, but the data I get is obviously undifined. I want to send this data to the Home component (an array, now I only send an object and I don't know how to do it right, exactly in the same form as box_data, only changed "checked" form) and save it as checkedTypeOfClient argument and then with this data filter current customers. After clicking on the input I want to recive in my checkedTypeOfClient Array for example:

checkedTypeOfClient : IBox[] = [
    { name: "Producent", checked: false},
    { name: "Handel", checked: false },
    { name: "Simple", checked: true }
  ];

Code is

TypeOfClientComponent.ts

import { Component, EventEmitter, OnInit, Output } from "@angular/core";
import { FormArray, FormBuilder, FormGroup } from "@angular/forms";

@Component({
  selector: "app-type-of-client",
  templateUrl: "./type-of-client.component.html"
})
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.form_model.valueChanges.subscribe(form_val => {
      // const search_text = form_val.search_text;
      this.typeOfClient.emit
            (  
            // checked: form_val.checked,
            // name: form_val.name
            );
    });
  }
}

interface IBox {
  name: string;
  checked: boolean;
}

HTML

<form [formGroup]="form_model">
  <ul formArrayName="boxes">
    <li *ngFor="let box of boxes.controls; let i = index">
      <label [formGroupName]="i">
        {{ box_data[i].name }}
        <input type="checkbox" formControlName="checked" />
      </label>
    </li>
  </ul>
</form>

HomeComponent.ts

import {
  Component,
  OnInit,
  enableProdMode,
  Output,
  EventEmitter
} from "@angular/core";

import { FormArray, FormBuilder, FormGroup } from "@angular/forms";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",

  styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnInit {
  currentUser$BH: number;

  currentSegments: string[];
  checkedSegment: string[] = ["A", "B", "C", "D", "E", "F", "G"];
  currentPH: string[];
  checkedPH: string[] = [];

  checkedTypeOfClient: IBox[] = [];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {}

  recieveCheckedTypeOfClient(typeClients: IBox[]) {
    this.checkedTypeOfClient = [];

    console.log("Give a data : ");
    console.log(typeClients);

    for (let index = 0; index < typeClients.length; index++) {
      const element = typeClients[index];
      this.checkedTypeOfClient.push(element);
    }

    console.log("Type of clients are :");
    console.log(this.checkedTypeOfClient);
  }

  filterSegments() {}

  recieveCheckedPH(e) {
    console.log(e);
    if (e.isChecked === true) {
      this.checkedPH.push(e.ph);
    } else {
      let i = this.checkedPH.indexOf(e.ph);
      if (i != -1) {
        this.checkedPH.splice(i, 1);
      }
    }
    console.log(this.checkedPH);
  }

  filterClients() {}
}

interface IBox {
  name: string;
  checked: boolean;
}

HTML

<div class="management">
  <li class="filterClientButton" (click)="filterClients()">Filtruj klientów</li>
  <app-type-of-client (typeOfClient)="recieveCheckedTypeOfClient($event)"></app-type-of-client>
</div>