How to add space in listing value in angular?

user_11297147 0
Viewed 104

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

enter image description here

angular css html
3 Answers

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);
  }
}
user_116971710

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>
user_107535040

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>
user_155228220
Related