How to add space in listing value in angular? - html

Question

As show below code i want to add space after every value in listing in angular. This data are come in table view.
In HTML file
<ng-container matColumnDef="rType">
<th mat-header-cell *matHeaderCellDef > Resource Type </th>
<td mat-cell *matCellDef="let element"> {{element.rType}} </td>
</ng-container>
In ts file
bindTableCol() : void {
if(DNHelper.loginUserData && DNHelper.loginUserData.resourcePreference1 && DNHelper.loginUserData.resourcePreference1.length > 0){
this.displayedColumns = DNHelper.getColumnTable(DNHelper.loginUserData.resourcePreference1);
this.displayedColumns.push('view_more');
this.displayedColumns.push('action');
} else {
this.displayedColumns = ['divisonName', 'categoryName', 'rType', 'resourceStatus', 'view_more', 'action'];
}
}
In Result (These are values)
CRWT1,CRWT2IA,CRWT2,CRWT3,ENG1
Expected Result
CRWT1, CRWT2IA, CRWT2, CRWT3, ENG1
There snap of generated html

Answer 1

To minimize the load on your application, you might also consider creating a pipe.
It could look something like this, as far as usage: <p>{{ element.rType|join:', ' }}</p>.
The transform function would look like this:
#Pipe({
name: 'join'
})
export class JoinPipe implements PipeTransform {
transform(input:Array<any>, sep = ','): string {
return input.join(sep);
}
}

Answer 2

You can try this :
<ng-container matColumnDef="rType">
<th mat-header-cell *matHeaderCellDef > Resource Type </th>
<td mat-cell *matCellDef="let element"> {{element.rType.split(",").join(", ")}} </td>
</ng-container>

Answer 3

Use this code It will help you.
<ng-container matColumnDef="rType">
<th mat-header-cell *matHeaderCellDef > Resource Type </th>
<td mat-cell *matCellDef="let element"> {{element.rType.replaceAll(',',', '}} </td>
</ng-container>