Show multiple white spaces in a p-table's cell

[magliarov]

Hello
In a dataset that I show in a p-table there're several strings with multiple white spaces. Unfortunately I can't collapse the white spaces into only one. I've tried to use the css style: white-space: pre but it added a lot of white spaces at the begin and at the end of every string and it's makes the table much less readable and usable.
Is there a way to solve the problem without use css style: white-space: pre?

[Ctrl-C]

Do you want to keep and show whitespace? Can you replace it with   ?

[magliarov]

I would like to show white spaces. I've tried to use a pipe to replace ' ' whit ' ' but the special character Entity '' " in the strings were not converted in white spaces.
Ex: for the string "000002150 773" (two white spaces) the output was "000002150  773" (one   and one white space).

the pipe's code is:

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

@Pipe({
name: 'multiSpace'
})
export class MultiSpacePipe implements PipeTransform {

transform(value: String): String {
return value.replace(' ', ' ');
}

}

what do you suggest?
Thanks

[Ctrl-C]

That's because string.replace by default only replaces first instance.
Try value.replace(/\s/g, " ");

[magliarov]

I'm sorry I wasn't clear, the problem is that the charter entity ' ' wasn't converted in a white space: the string was rendered with ' ' instead of ' '.

to be more clear below a screenshot of a cell:

https://imgur.com/5Q0f2oK

[Ctrl-C]

A little plunker would help. Where were you using 'pre' style? I tried to wrap the td's content in a <span style='white-space:pre'> and that works.

[magliarov]

thanks a lot it worked... I tried to put style='white-space:pre' in the div tag that encapsulate the {{}}:

<div *ngIf="col.type!='combo'" style='white-space:pre'>
{{rowData[col.field]}}
</div>

and it added spaces before and after the string. Adding the span tag solved the problem