Angular @Output/EventEmitter returns undefined

I have been trying to send data from a child component to a parent component in Angular. At the parent level, the prop keeps returning 'undefined.' I don't know what I'm missing.

CHILD.component.ts

@Output()
onGetDropdownItems: EventEmitter<any> = new EventEmitter<any>();
getDropdownItems() {
this.onGetDropdownItems.emit(this.dropdownItems)
}

/**
* Sets the data for the Items per page select dropdown.
*/
@Input()
dropdownItems: [
{
optionValue: "5",
optionText: "5",
},
{
optionValue: "10",
optionText: "10",
},
{
optionValue: "20",
optionText: "20",
}
]


PARENT.component.ts

@Input()
dropdownItems: any;

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

ngOnInit() {
this.getDropdownItems(this.dropdownItems);
}



PARENT.component.html

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

Continue reading...