javascript - How to show Different data in UI then Backend Data

Question

I am new to angular. From Backend i am getting space data as attached in console image.

 <div class="row">
  <div class="col-12 mt-3 pr-0 overflow-auto d-flex align-items-center">
    <div *ngFor="let data of spaces; let i=index;" class="spaceTabs cursorPointer"
      [ngClass]="{ active: selectedSpace === data.space }">
      <p class="rangeTag">Rs: {{data.range}}</p>
      <span (click)="spaceTabHandler(data)">{{data.space | titlecase}}</span>
    </div>
  </div>
</div>

This is how i am showing space data as data.space in UI. My requirement is livingroom should display as Living, diningroom as Dining Room . How can i manipulate data in UI according to requirement.

Any lead would be helpful.

Answer 1

You can use a pipe to transform your output

@Pipe({
    name: 'space'
})
export class SpacePipe implements PipeTransform {
    transform(value:string, args?:string): any {
        switch(value || null) {
            case 'livingroom':
                return 'Living';
            case 'diningroom':
                return 'Dining Room';
            default:
                return value;
        }
     }
  }

<span (click)="spaceTabHandler(data)">{{data.space | titlecase | space}}</span>