html - Espacio de Angular Pipe

Estoy usando pipe para aplicar qué tipo de moneda se mostrará. R$o $. Pero se queda atascado con el valor Total, quería saber cómo puedo obtener un espacio entre los valores del pipe

Resultado esperado R$86,20

<ng-container matColumnDef="totalValue">
            <mat-header-cell class="mr-16" *matHeaderCellDef fxFlex="15"  fxLayoutAlign="end center">Total R$</mat-header-cell>
            <mat-cell  class="mr-16" *matCellDef="let element" fxFlex="15"  fxLayoutAlign="end center" >
              <p class="text-truncate" matTooltip='{{ element.totalValue  | currency : element.currency : "symbol" }}'>
                {{ element.total | currency : element.currency : "symbol" }}
              </p>
            </mat-cell>
          </ng-container>

Respuesta #1

Puedes definir un CurrencySpacePipe personalizado, que extienda CurrencyPipe e inserte un espacio después del símbolo de la moneda:

import { Pipe } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Pipe({ name: "currencySpace" })
export class CurrencySpacePipe extends CurrencyPipe {
  transform(value: number, ...args: any[]): string {
    return super.transform(value, ...args).replace(/([^\d.,])(\d)/, "$1 $2");
  }
}

y usa esa tubería, en lugar de la CurrencyPipe estándar, en tu marcado:

{{ element.total | currencySpace : element.currency : "symbol" }}

Mira este stackblitz para una demostración.

Respuesta #2

Concatena el espacio al final como se muestra en el código a continuación. Funciona para mí. Por cierto, estoy usando Angular 6.

<span>{{ product.price | currency:'USD' + ' ' }}</span>