How to call a function on edit button in angular?

Rahul Patil

My project angular version:

Angular CLI: 9.0.0-rc.7

I m working with grid and I want to edit a record. and call a function when press the button but console.log is not display?

partymastercomponent.ts

import { Component, OnInit } from '@angular/core';
import { BackendService } from '../backend.service';
@Component({
selector: 'app-partymaster',
templateUrl: './partymaster.component.html',
styleUrls: ['./partymaster.component.css']
})
export class PartymasterComponent implements OnInit {
PartyMstId: any;
PartyCode: any;
PartyName: any;
partylist: any;
constructor(public myservice: BackendService) { }
columnDefs = [
{
headerName: "Edit",
field: "icon",
width: 100,
//id: this.PartyMstId,
cellRenderer: function (params)
{
//return '' //when i press edit icon then console log not print
return 'ClickThis' //when I press button then console.log is not display
}
},
{ headerName: 'PartyMstId', field: 'PartyMstId', sortable: true, filter: true/*, checkboxSelection: true*/ },
{ headerName: 'PartyCode', field: 'PartyCode', sortable: true, filter: true },
{ headerName: 'PartyName', field: 'PartyName', sortable: true, filter: true },
];
editfunction() {
console.log("call this edit function");
}
}

partymastercomponent.html

how to call a function on edit button click??

icon as well as button is not working??

when I press right click on browser then

help??

9 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ramachandran M6y ago
Accepted answer
Hi Rahul

Try this. it was worked for me
"width: 1000px; height: 500px;"
class="ag-theme-balham"
[rowData]="partylist"
rowSelection="multiple"
(rowClicked)='onGridRowClicked($event)'
[columnDefs]="columnDefs">
ag-grid-angular>
columnDefs = [
{
headerName: "Edit",
template:
`"delete" type="button" >Delete`
}
,
{ headerName: 'PartyMstId', field: 'PartyMstId', sortable: true, filter: true/*, checkboxSelection: true*/ },
{ headerName: 'PartyCode', field: 'PartyCode', sortable: true, filter: true },
{ headerName: 'PartyName', field: 'PartyName', sortable: true, filter: true },
];
onGridRowClicked(e: any) {
if (e.event.target !== undefined) {
let actionType = e.event.target.getAttribute("data-action-type");
switch (actionType) {
case "edit":
{
console.log("View action clicked");
}
case "delete":
{
console.log("View action clicked");
}
}
}
}
+1
Rahul Patil6y ago
@Ramachandran M many thanks because now button and also icon is work for me when I press icon then call a function thanks once again.
0
Ramachandran M6y ago
1. onGridRowClicked(e: any) {
2. if (e.event.target !== undefined) {
3. let actionType = e.event.target.getAttribute("data-action-type");
4. if(actionType == "edit")
5. {
6. console.log("View edit action clicked");
7. }
8. }
9. }
incase if you are using multiple buttons then use switch case action
0

thanks but now one issue is generate again when I press edit button then both are called:

View action edit clicked partymaster.component.ts:90

View action deleteclicked

grid Column definition this way

columnDefs = [
{
headerName: "Edit",
template:
`"delete" type="button" >Delete`
}
,
{ headerName: 'PartyMstId', field: 'PartyMstId', sortable: true, filter: true/*, checkboxSelection: true*/ },
{ headerName: 'PartyCode', field: 'PartyCode', sortable: true, filter: true },
{ headerName: 'PartyName', field: 'PartyName', sortable: true, filter: true },
];

You missed below code

@Ramachandran M

partycomponent.ts

columnDefs = [
{
headerName: "Edit",
field: "Edit",
cellRendererFramwork: PartymasterComponent,
width: 100,
cellRenderer : function(params){
return ''
},
},
{ headerName: 'PartyMstId', field: 'PartyMstId', sortable: true, filter: true/*, checkboxSelection: true*/ },
{ headerName: 'PartyCode', field: 'PartyCode', sortable: true, filter: true },
];
onGridRowClicked(e: any) {
if (e.event.target !== undefined) {
let actionType = e.event.target.getAttribute("data-action-type");
switch (actionType) {
case "edit":
{
console.log("View action clicked");
}
case "delete":
{
console.log("View action clicked");
}
}
}
}

partymastercomponent.html

please can u help more??

still I m trying to solve problem?

Hi,

Please refer below link,

https://www.devglan.com/angular/angular-6-example