指向新屏幕的单元格中的 Ag-grid 按钮

Question

I have added the "Edit" button in the grid of the table for every row. The data for the table is coming from the api with the following JSON response.

{ 
 Id: 1783
 total: 2
 trasfer: true
 Sizing: true
 name: "runner"
}

I am trying to implement when user clicks the edit button a new screen appears where one can edit the values of that row. So far I have implemented a button rendered component and alert when the button is click. How can I implement router to a new screen along with editable data of that particular row.

Demo: https://ag-grid2.zoltanhalasz.net/

button-renderer.component.ts

@Component({
  selector: 'app-button-renderer',
  template: `
    <button type="button" (click)="onClick($event)">{{label}}</button>
    `
})
export class ButtonRendererComponent implements ICellRendererAngularComp { 
    afterGuiAttached?(params?: import("ag-grid-community").IAfterGuiAttachedParams): void {
        return;
    }  
    ngAfterViewInit(): void {
        return;
    }
  public params;
  label: string;

  constructor(){}
  
  agInit(params: ICellRendererParams): void {
    this.params = params;
    this.label = this.params.label || null;
}
  refresh(params: any): boolean {
    return false;
}

public onClick(event) {
    this.params.data[this.params.colDef.field] = event.checked;

    if (typeof this.params.context.componentParent.notifyCellUpdate === "function"){
        this.params.context.componentParent.CellUpdate(this.params);
    }
    
 }
}

app.component.ts

       columnDef = [   {
            headerName: 'Button',     field : 'changeSettings',     
            cellRenderer: 'buttonRenderer',
            cellStyle: {'text-align': 'center'},
            cellRendererParams: {
              label: 'Open'
            }
          } ]

 CellUpdate(params){
      
        if (params.colDef.field === "changeSettings"){
            alert("Notified Button Clicked");
   
        }
    }

Answer 1

Create a component and navigate to it with input data. There are many ways for transforming data between components.

Read this article

In your sample demo you should define route with an id and navigate to it's component then call an api to fetch the data.

Also you can open a modal to show the data instead. Example:

 CellUpdate(params){
      
        if (params.colDef.field === "changeSettings"){
          const modalRef = this.modalService.open(YourEditComponent);
          modalRef.componentInstance.data= params;   
        }
    }