ag-grid: how to add button in master detail template - angular5

Question

I am using master/detail in ag-grid. I want a save button in detailed section after all rows. I am able to do that using template, but its not firing the event. I think its just a template and don't work for event. Can you please suggest me how can I add button in detailed section
here is my code
columnDefs: [
{
headerName: "CompanyName",
field: "CompanyName",
cellRenderer: "agGroupCellRenderer"
}
],
groupDefaultExpanded: 0,
detailRowHeight: 200,
detailCellRendererParams: {
detailGridOptions: {
columnDefs: [
{
headerName: "Name",
field: "Name",
cellRenderer: "agGroupCellRenderer"
},
{
headerName: "Age",
field: "Age",
suppressFilter: true,
},
{
headerName: "Gender",
field: "Gender",
suppressFilter: true,
}
],
onGridReady: function (params: any) {
params.api.sizeColumnsToFit();
}
},
getDetailRowData: function (params: any) {
params.successCallback(params.data.ChannelComponentsVm);
},
template:
'<div style="height: 100%;">' +
'<div ref="eDetailGrid" style="height: 90%;"></div>' +
'<div style="height: 10%;"> <button (click)="saveEmployeeDetails()">Save</button> </div>' +
'</div>'
}
I cannot use it in cell renderer as the button is not in column. It should be at the end of the child grid.
-> parent row
-> child row1
-> child row2
-> child row3
Save button
How to add save button at the end of detailed rows

Answer 1

// get ag grid template ref
#ViewChild('agGrid') agGrid: TemplateRef < any > ;
// attach the click listener on row group opened grid event.
// don't forget to clean up this listener on destroy component event or somewhere in the code
rowGroupOpened(params: any) {
var saveButton = this.agGrid["_nativeElement"].querySelector(`#saveDetailsButton`);
if (saveButton) {
saveButton.addEventListener('click',this.saveEmployeeDetails.bind(this));
}
}
saveEmployeeDetails(): void {
console.log('save button clicked');
}

Answer 2

vinoth's answer has the right idea, but I wanted to give a more complete answer shown a slightly different way. To start with, I had the same issue with the event not firing - this is due to lifecycle events and how things are compiled. If you are using a template (as shown in the question) then you cannot put the onClick event in the HTML in the template, you have to instead do it in TypeScript/JavaScript in the .ts file.
In your HTML where you define the ag-grid div, assign the action method rowGroupOpened. This should be in your HTML file, or possibly in your .ts file (not in the template in grid definitions).
(rowGroupOpened)="rowGroupOpened($event)"
In your .ts file, define the rowGroupOpened event.
RowGroupOpened(params: any) {
//below pass the id of your button/div used in your template
const buttonDiv = document.getElementById('saveButton');
if (buttonDiv){
buttonDiv.addEventListener('click', (e) => {
this.myButtonClickMethod();
});
}
}
myButtonClickMethod() {
//do something
}
Your button in the template string should have an id like this:
<button id="saveButton">Save</button>
This way when one of your detail grids expanded it will attach the onClick method at that time. Remember that by default, if a detail grid is not expanded then it doesn't exist/is undefined. Also don't forget to do cleanup/destroy when needed.