title: Angular Pipe Replace character
body: <p>I have written a pipe in Angular to replace the character <code>|</code> with a <code>,</code>. </p>
  
  <pre><code>export class AppComponent  {
    name = 'Name|with|pipes';
  }
  </code></pre>
  
  <p>The desired output is <code>Name,with,pipes</code>, but I am seeing it as <code>,N,a,m,e,|,w,i,t,h,|,p,i,p,e,s,</code></p>
  
  <p>Here's the code for the pipe:</p>
  
  <pre><code>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);
    }
  }
  </code></pre>
  
  <p>Here's the code on <a href="https://stackblitz.com/edit/angular-sbt1lt" rel="noreferrer">StackBlitz</a>. How can I fix this?</p>