How to replace underscore(_) with space (' ') in angular view?

Question

I'm displaying array keys in header of a table and I have underscore in my keys. I want to replace underscore with space in html table. I do not want to do it in component as I have other requirements.

<table>
   <thead>
       <tr>
           <th *ngFor="let header of printFields">{{header}}</th>
       </tr>
   </thead>
   <tbody>
       <tr *ngFor="let ab of printData">
           <td *ngIf="ab.Bill_Number">{{ab.Bill_Number}}</td>
           <td>.....</td>
           <td>.....</td>
       </tr>     
   </tbody>
</table>

Answer 1

If there is only one instance you can use this,

 {{ header.replace('_', ' ') }} 

or else you have to use filter

App.filter('strReplace', function () {
 return function (input, from, to) {
 input = input || '';
 from = from || '';
 to = to || '';
 return input.replace(new RegExp(from, 'g'), to);
 };
});

and use it like

 {{ header | strReplace:'_':' ' }}

hope this helps :-)

Answer 2

this case angular 6:

 underscore(selectkpi){
    this.selectedUnderKpi = selectkpi.replace(' ', '_');
    var a = this.selectedUnderKpi.
    console.log("ini = ",a);
  }

Answer 3

You can use a pipe

https://angular.io/guide/pipes

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'replaceUnderscore'})
export class ReplaceUnderscorePipe implements PipeTransform {
  transform(value: string): string {
    return value? value.replace(/_/g, " ") : value;
  }
}

Then use it like

{{ header|replaceUnderscore}}

You could also make a more generic version that takes the pattern to replace and the replacement as parameters, like @Ash-b's answer for angularJs

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'replace'})
export class ReplacePipe implements PipeTransform {
  transform(value: string, strToReplace: string, replacementStr: string): string {

    if(!value || ! strToReplace || ! replacementStr)
    {
      return value;
    }

 return value.replace(new RegExp(strToReplace, 'g'), replacementStr);
  }
}

And use it like

{{ header| replace : '_' : ' ' }} 

Here is a demo on stackblitz

Answer 4

You can do the following :

1. create a pipe

2. in the transform method write the following

   transform(value: any, args?: any): string {
       let [first, ...rest] = value.split("_");
       if (rest.length === 0) return first;
       else return `${first} ${rest.join(" ")}`;
   }
   

   this code will handle if the key have underscore or not.

   • key = angular_7 => angular 7
   • key = angular => angular