I am trying to make a custom component in ag-gird which consists of two radio button. I wanted to make selection for each individual row, so I have tried both cellRender and cellEditor, with cellEditor, the radio buttons are visible only after a click event is triggered.

And with cellRenderer it is applying changes to all the rows when a radio button is selected as shown in the images. I am looking for individual row edits.

Dots in coldefs are just mention the other columns,

Please check the below code aswell

  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-alpine"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [frameworkComponents]="frameworkComponents"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `,
})

constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: 'athlete',
        cellRenderer: 'btnCellRenderer',
        minWidth: 150,
      }...
      },
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 100,
    };
    this.frameworkComponents = {
      btnCellRenderer: BtnCellRenderer
    }
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json'
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

Code of the custom component

@Component({
  selector: 'btn-cell-renderer',
  template: `
<input type="radio" [value]="1" [(ngModel)]="radioValue" (change)="stopEdit()">Val
<input type="radio" [value]="2" [(ngModel)]="radioValue" (change)="stopEdit()">Not-Val
  `,
})
export class BtnCellRenderer {
  private params: any;
  public radioValue: Number;

  agInit(params: any): void {
    this.params = params;
    this.radioValue = params.value;
  }

  stopEdit() {
    alert(`Value changed to: ${this.radioValue}`);
    this.params.api.stopEditing();
  }
}