javascriptangulartypescriptionic-frameworkngx-datatable

Ionic/Angluar NGX Datatable: Transform boolean values to string


I am developing an Ionic/Angular application and I am using NGX datatable. It works pretty good, but I need to display the boolean values of one column not as "true" or "false" (English language) - I need to display the boolean values in German ("true" = "Ja" , "false" = "Nein").

The problem is that I am using the automatically generating columns, so my datatable in html looks like this:

<ngx-datatable [selectionType]="'single'" (select)="openDetailsPage($event)" [messages]="messages"
        class="bootstrap" [limit]="10" [rows]="allOpenTickets" [rowHeight]="50" [columns]="columns"
        [columnMode]="'force'" [sortType]="'multi'" [headerHeight]="50" [footerHeight]="50"
        [rowClass]="getRowClass">
</ngx-datatable>

And i define my columns in typescript like:

this.columns = [
    { name: 'Id', prop: 'id' },
    { name: 'Ziel', prop: 'goalDate', pipe: this.datePipe() },
    { name: 'Erstellt', prop: 'created' , pipe: this.datePipe() },
    { name: 'Titel', prop: 'title' },
    {name:'Erledigt',prop:'done'}
];

As you can see, I use a datetipe to transform the date, is there something like a pipe for boolean values? Or should I not use the automatically generated columns and instead create my own?

My final table should look like this: final table picture


Solution

  • You can use any kind of pipe you desire to transform the data - even your custom pipe (as per docs here). This is the signature of a PipeTransform.

    So you probably want something along the lines of:

    germanBooleanPipe(): PipeTransform {
      return {
        transform: (value: boolean) => value ? "Ja" : "Nein";
    }
    

    And apply that pipe to your column:

    this.columns = [
        { name: 'Id', prop: 'id' },
        { name: 'Ziel', prop: 'goalDate', pipe: this.datePipe() },
        { name: 'Erstellt', prop: 'created' , pipe: this.datePipe() },
        { name: 'Titel', prop: 'title' },
        { name:'Erledigt', prop:'done', pipe: this.germanBooleanPipe() }
    ];
    

    Note that I've never used ngx-datatable myself, so this might need some minor adjustments.