Passing events from Child to Parent Component-Angular

Question

I am new to Angular and here is my issue:

I have a child component where I am handling the cell click event of a grid, and in the callback I have an EventEmitter and is declared like @Output() cellClicked :any;. I am instantiating the EventEmitter inside the callback function, like in the example code below:

        onCellClicked($event){
            this.cellClicked = new EventEmitter();
            this.cellClicked.emit($event);  
        }

In the parent component template I have placed this grid

    <data-grid 
        [gridData]="restrictionsAll.restrictions" 
        [columnDefinitionsPath]="restrictionsAll.agGridConfigPath" 
        (getApi)="getGridApi($event)" 
         >
    </data-grid>

and in the component.ts for parent I am trying to capture the emitted event.

    cellClicked($event)
         {
            console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
      }

When I debug the code control is reaching the break point in the child component but it's not passing to parent component in the cellClicked method. Appreciate your help on this.

Aravind Aravind · Accepted Answer · 2017-11-03T22:53:15

Because you are not implementing the event anywhere

In your container parent component

<data-grid 
    (cellClicked)="cellClickedInParent($event)"
    [gridData]="restrictionsAll.restrictions" 
    [columnDefinitionsPath]="restrictionsAll.agGridConfigPath" 
    (getApi)="getGridApi($event)" 
     >
</data-grid>

In the parent component handle the event

cellClickedInParent(event){
   console.log(event) //////// this works
}

Passing events from Child to Parent Component-Angular

1 Answers