Using ngif else to display a different value in table - html

Question

I am getting data from the database. So in a particular column named card there exists only two types of values. "Debit" or "Credit". But in the backend I only receive values as "D" or "C".
`<div *ngIf="isBank">
<div class="table-responsive">
<table class="table">
<thead class="table_header">
<tr>
<th>Name</th>
<th>Bill</th>
<th>Card</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bank of bankList; index as i">
<td>{{ bank.name}}</td>
<td>{{ bank.bill}}</td>
<td>{{ bank.card}}</td>
</tr>
</tbody>
</table>`
</div>
</div>
So here in the Card column I get only two values called as 'D' or 'C'. I get these values from the backend. So I want to change the value to 'Debit' if I get 'D' and 'Credit' if I get 'C'. This hads to be done within the template using ngif or whatever works.

Answer 1

You can define an angular pipe
card-type.pipe.ts:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({name: 'cardType'})
export class CardTypePipe implements PipeTransform {
transform(value: string): string {
if (value.toLowerCase() === "c")
return "Credit";
else if (value.toLowerCase() === "d")
return "Debit";
else
return value;
}
}
And in the template:
<tr *ngFor="let bank of bankList; index as i">
<td>{{ bank.name }}</td>
<td>{{ bank.bill }}</td>
<td>{{ bank.card | cardType }}</td>
</tr>
app.module.ts:
import { CardTypePipe } from './card-type.pipe';
#NgModule({
declarations: [
CardTypePipe
],
imports: [..],
providers: [..],
bootstrap: [AppComponent]
})
export class AppModule { }
If you think this pipe is an overkill, you can always use (I personally like my templates to be plain and simple):
<td>{{ bank.card === "D" | "Debit" : "Credit" }}</td>