Column formatter property not working

Hi, I have a problem in the Angular Grid, the [formatter] property of the column is not working or is not set. This feature is working in the angular version, because it seems that the documentation doesn't appear but in the API Docs yes with an example for plain javascript. I tried to add it in an angular grid and it's not working.

There is a way to implement this? We don't want to use the ng-template to template a cell


1 Reply

PS Pavithra Subramaniyam Syncfusion Team March 21, 2025 08:27 AM UTC

Hi Cesar Smerling,


The reported scenario might be due to how Angular handles function binding in templates. You need to define the formatter function outside the component template and reference it properly in the column configuration. Please refer to the below code example and sample link for more information.


<e-column

        field="Verified"

        width="130"

        [disableHtmlEncode]="false"

        [formatter]="formatter"

        textAlign="Right"

      ></e-column>

 

class ExtendedFormatter implements ICellFormatter {

  public getValue(column: Column, data: Object): Object {

    return (

      '<span style="color:' +

      (data['Verified'] ? 'green' : 'red') +

      '"><i>' +

      data['Verified'] +

      '</i><span>'

    );

  }

}

 

@Component({

.   .  .

})

export class AppComponent {

  public formatter: any = ExtendedFormatter;

  

}

 

 


Sample: https://stackblitz.com/edit/angular-hc4fvfoc-kt7bwxtx?file=src%2Fapp.component.ts


Please get back to us if you need further assistance on this.


Regards,

Pavithra S


Loader.
Up arrow icon