Angular Child-to-Parent Communication: EventEmitter Returns Undefined

Below is a list of common pitfalls and suggestions to solve the undefined data issue:

1. Event Emission Timing

In your child component, the method getDropdownItems() emits the data via EventEmitter. However, make sure that:

• You are actually calling getDropdownItems() at an appropriate time (for example, in ngOnInit or another lifecycle hook) so that the event is fired.
• The parent only receives the event after the child has emitted it.

If the parent's ngOnInit method is calling getDropdownItems(this.dropdownItems) with its own (still uninitialized) dropdownItems, it likely receives undefined. Instead, rely solely on the event emission from the child.

2. Remove Unnecessary @Input() in the Parent

The @Input() decorator in the parent component is meant for receiving values from the parent’s parent, not from a child event. In your case, the parent is supposed to receive the data via the (onGetDropdownItems) event binding, so you can remove @Input() from the dropdownItems property in parent:

TYPESCRIPTCopied
// PARENT.component.ts
// Remove the @Input() decorator if not required for parent->child data binding.
dropdownItems: any;

getDropdownItems(e: any) {
  this.dropdownItems = e;
  console.log('DROPDOWN ITEMS: ', e);
}

ngOnInit() {
  // Do not call getDropdownItems here, let the event handle the update
  // this.getDropdownItems(this.dropdownItems);  <-- Remove or comment out this line.
}

3. Rely on the Event from the Child

Ensure your parent template is correctly set to listen to the event emitted by the child. Your HTML looks correct:

HTMLCopied
<cbds-pagination (onGetDropdownItems)="getDropdownItems($event)"></cbds-pagination>

Now, when the child component calls onGetDropdownItems.emit(this.dropdownItems), the parent's getDropdownItems(e: any) will be triggered and update the parent’s dropdownItems accordingly.

4. Verify Child's DropdownItems Data

In your child component, check that the property dropdownItems is defined as expected before emitting:

TYPESCRIPTCopied
// CHILD.component.ts
@Input() 
dropdownItems: Array<{ optionValue: string; optionText: string; }> = [
  { optionValue: "5", optionText: "5" },
  { optionValue: "10", optionText: "10" },
  { optionValue: "20", optionText: "20" }
];

@Output()
onGetDropdownItems: EventEmitter<any> = new EventEmitter<any>();

ngOnInit() {
  // When the child is initialized, emit the dropdownItems.
  this.getDropdownItems();
}

getDropdownItems() {
  this.onGetDropdownItems.emit(this.dropdownItems);
}

Summary

• Do not call the parent's getDropdownItems method in ngOnInit with an undefined property.
• Remove the @Input() decorator from the parent dropdownItems property if it isn’t being used for parent-to-child data binding.
• Ensure the child component is calling getDropdownItems() at a time when dropdownItems is properly initialized.

Following these steps will help ensure that the parent receives the actual dropdown data rather than undefined.