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
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.