Emmiter array return wrong

I am trying to send myself from child to parent the data that I am broadcasting. This is supposed to be the whole table, but the data I get is obviously undefined. 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 receive 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.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>

Continue reading...