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.

CHILDponent.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",
    }
  ]

PARENTponent.ts

  @Input()
  dropdownItems: any;

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

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

PARENTponent.html

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

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>

• javascript
• angular
• eventemitter

1 Answer 1

The dropdownItems property`s value is defined as a type.

@Input()
dropdownItems = [
    {
      optionValue: "5",
      optionText: "5",
    },
    {
      optionValue: "10",
      optionText: "10",
    },
    {
      optionValue: "20",
      optionText: "20",
    }
  ]