Angular EventEmitter exposing value to parent component

Question

In my Angular application I have a child grid component inside of my parent component, and I am trying to emit some data from my child grid to the parent container. I have used event emitter to try to "emit" that value to the parent, but when I try to access that variable that contains the data in the parent component it logs as undefined.

Here is what I have inside of my child component:

@Component({
    selector: 'row-details',
    templateUrl: './row-details.component.html'
})

export class ChildRowDetailsComponent {

childRowData: any[];

@Output() emitRowData = new EventEmitter<any>();

constructor(...) {}

createRowData(gridValues) {
        let rowData: any[] = [];
        for (let i = 0; i < gridValues.length; i++) {
            let data = gridValues[i % gridValues.length];
            rowData.push({
               ...
            });
        }
        this.childRowData = rowData;

        this.emitRowData.emit(this.childRowData);
    }

... }

child.component.html:

<ag-grid-angular #agGrid style="width: 100%; height:100%" class="ag-material grid-Holdings"
                 [rowData]="rowData"
                 [getRowHeight]="getRowHeight"
                 headerHeight="35"
                 [columnDefs]="columnDefs"
                 [gridOptions]="gridOptions"
                  (gridReady)="onGridReady($event)">

</ag-grid-angular>

As you can see, I am trying to "emit" this.childRowData to my parent.

In my parent component I try to access it in a method like so:

...
getChildRowData(params, childRowData) {
    // I would like to do something with childRowData
}
...

This does not work because childRowData is undefined. Do I need to do something specific to have my parent component "listen" for the event? Also, do I really need an event emitter for this? Can't I just get childRowData as a global variable via a service? EventEmitter seems overkill in this case...

can u share your templates as well? maybe there is a problem with the syntax or passing the parameter — Jenson
There are no directives in my templates...everything is generated via the components. Also why would I need to add anything to the templates? I just need parent.components.ts to have access to the value in child.components.ts .... I hope I am being clear... — MadCatm2
I don't see the parent html, where you use the row-details tag? — AJT82

LRN LRN · Accepted Answer · 2019-03-07T10:17:44

To get access to the outputted event, the template of the parent component should have a line like this somewhere:

<row-details (emitRowData)="getChildRowData($event)"></row-details>

and then in the parent component's ts file

getChildRowData(childRowData) {
    /* do stuff with the data here */
}

Angular EventEmitter exposing value to parent component

1 Answers