ag-grid CellRenderer component change

Question

I'm new to the Ag-Grid i have a field with colDef as follows

{
 field: XXXXXX,
 header: XXXXX,
 editabl...
 ...
 cellRenderer: (params) => {
   return '<input type= "text" ........ [readonly]="isReadonly">'
},
}

and i am changing the isReadonly false/true in the .ts when click event of a button outside the aggrid.

private isReadonly:boolean;

...

onBtnserch(){
...
this.isReadonly = true

}

what im tring to archive is to make the defined input field readonly by a button click(button is out side the grid) Am i doing it wrong or can this be done in this way if not what path should i follow.