Angular 6 ag-grid cell renderer click function

Question

So I'm trying to setup ag-grid and I can't get one thing to work. I want to have a column that is actions. Then I want it to have a link or button that triggers a method in the component file.

For the column def I have the following. What am I doing wrong?

 {
    headerName: 'Actions',
    cellRenderer: params => {
      return `<a (click)="onEditClick("${params.data.hostname}")">Edit</a>`;
    }
 }

Answer 1

I use cellRenderFramework:

    {
    headerName: '', width: 30,
    cellRendererFramework: ActionCellRendererComponent,
    cellRendererParams: {
      icon: 'fa-download',
      action: this.downloadAttachmentAction
    }
  }

and than I have custom Component

@Component({
  selector: 'cu-download-link-cell-renderer',
  template: `
  <div class="text-center">
    <i class="fa {{params.icon}}" (click)="onClick()" aria-hidden="true"></i>
  </div>`
})
export class ActionCellRendererComponent {

    params;

    constructor() {
    }

    agInit(params): void {
        this.params = params;
        if (_.isNil(params.action)) {
            throw new Error('Missing action parameter for ActionCellRendererComponent');
       }
   }

   onClick(): void {
       this.params.action(this.params);
   }
}

export type CellAction = (params) => void;

Answer 2

Use cellRendererFramework to add action Buttons.

App.component.ts

columnDefs = [
  { headerName: 'First Name', field: 'firstName', sortable: true, filter: true },
  { headerName: 'Last Name', field: 'lastName', sortable: true, filter: true },
  { headerName: 'Email', field: 'email', sortable: true, filter: true },
  { headerName: 'User Name', field: 'userIdName', sortable: true, filter: true },
  { headerName: 'Role', field: 'role', sortable: true, filter: true },
  { headerName: 'Actions', field: 'action', cellRendererFramework: CellCustomComponent }];

rowData: any;

ngOnInit() {
  const empDatas = localStorage.getItem('user');
  const finalData = JSON.parse(this.empDatas);
  this.rowData = this.finalData;
}

In the above code, we can see CellCustomComponent. Create that component & add the buttons.

cell-custom.component.html

<button type="button" class="btn-success" (click)="editRow()">Edit</button>
<button type="button" class="btn-success" (click)="viewRow()">View</button>

Now in the cell-custom.component.ts add the functions

cell-custom.component.ts

export class CellCustomComponent implements OnInit {
  data: any;
  params: any;
  constructor(private http: HttpClient, private router: Router) {}

  agInit(params) {
    this.params = params;
    this.data = params.value;
  }

  ngOnInit() {}

  editRow() {
    let rowData = this.params;
    let i = rowData.rowIndex;
    console.log(rowData);
  }

  viewRow() {
    let rowData = this.params;
    console.log(rowData);
  }
}

After this we need to add this component in App.module.ts

app.Module.ts

@NgModule({
  declarations: [AppComponent, CellCustomComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([AppComponent])
  ],
  providers: [],
  entryComponents: [CellCustomComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now we can trigger a method in the component file using Button.

Answer 3

it has been perfect! Thank you

prebilling-view.component.ts (cellRendererParams: { context: this })

 {
field: 'adjustmentUnit',
  tooltipField: 'adjustmentUnit',
  cellRendererParams: { context: this },
  cellRendererSelector: (params: any) => {
    const component = {
      component: 'textAreaVueRenderer',
      params: { values: true, textAlign: 'right', typeValue:false}
    }
    return component;
  },
  cellStyle: { textAlign: 'right' },
  headerClass: 'textRight',
},

function in prebilling-view.component.ts

onEditChange(val:string, index:any){
console.log("valor: "+ val)
console.log("index: "+ index)

}

input cellRenderSelector textAreaVueRender

  <input *ngIf="editEnabled"
            type="number"
            (input)="inputNegativeChangeHandler($event)"/>

function in cellRenderSelector textAreaVueRender component

 inputNegativeChangeHandler($event: any) {

this.params.context.onEditChange($event.target.value,this.params.rowIndex);

}

Answer 4

Yes, use the cellRendererFramework to handle the rendering.

In your columnDefs:

this.columnDefs = [
  {
    headerName: 'Header Name', field: 'field',
    cellRendererFramework: ColRenderer,
    cellRendererParams: { context: this },
    sortable: true, filter: true
  },
  ...
 ];

Then in your ColRenderer:

@Component({
  template: `<a (click)="clickHandler(rowData)">{{rowData.Member}}</a>`
})
export class ColRenderer implements ICellRenderer {
  public rowData: any;
  private params: any;

  public agInit(params: { data: any, context: any }) {
    this.rowData= params.data;
    this.params = params;
  };

  public clickHandler(data: any) {
    this.params.context.onEditClick(data);
  }
  ...
}

Change the names above obviously as needed. Just know the context is the key. You pass the context of your component to the renderer then use that context to call the function you want on click within your renderer.