angularag-grid

How to dynamically tick or untick checkbox based on return boolean value from a function in Angular


I am trying to select or unselect checkbox based on a return value from a function in Angular. The function doesn't get called inside the cellrenderer.

I have a function

isChecked:boolean=false

isFunDone()
{if data.value == good.value)
return this.isChecked = true;
}
else{
this.isChecked =false;
}

and in columndef cellrenderer I am calling this:

cellrenderer: (params: { isChecked: any;}) => {
 
return `<input type ="checkbox" [checked]="this.isFunDone.isChecked =='true'"/>`

Solution

  • If your function is a global one, do this.

    ngOnInit(): void {
        this.isChecked = this.data.value === this.good.value;
    }
    
    // ...
    
    cellrenderer: (params: ICellRendererParams) => {
        if(this.isChecked) {
            return `<input type="checkbox" checked>`
        } else {
            return `<input type="checkbox">`
        }
    }
    

    Please note that [checked] won't work inside the cellRenderer unless it's another component.


    Old Answer:

    This is the ag-grid way to do that

    cellrenderer: (params: ICellRendererParams) => {
       const isChecked = isFunDone(params.value) ? ' checked': ''; //string
       return `<input type="checkbox"${ isChecked }`;
    }
    
    // external function accepting any as I dont know your datatype
    isFunDone(data: any) {
     return (data === good.value);
    }