How to display or split a single string one below another inside a <td>

Question

i have data in in a td similar to

Sugar:5;Onion:3;Carrot:9;Bread:9;

where i want to display like,

Sugar:5

Onion:3

Carrot:9

Bread:9

Inside a td in a table.

im trying to implement using angular material table

i have reached only this much, want to achieve like the above image for Items column

code: html file

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

<ng-container matColumnDef="orderId">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> orderId </th>
    <td mat-cell *matCellDef="let element"> {{element.orderId}} </td>
</ng-container>

<ng-container matColumnDef="customerId">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> customerId </th>
    <td mat-cell *matCellDef="let element"> {{element.customerId}} </td>
</ng-container>

<ng-container matColumnDef="deliveryPincode">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> deliveryPincode </th>
    <td mat-cell *matCellDef="let element"> {{element.deliveryPincode}} </td>
</ng-container>

<ng-container matColumnDef="orderDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> orderDate </th>
    <td mat-cell *matCellDef="let element"> {{element.orderDate}} </td>
</ng-container>

<ng-container matColumnDef="items">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> items </th>
    <td mat-cell *matCellDef="let element"> {{element.items}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

Upload

typescriptfile

import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'antstack-problem';
  arrayBuffer:any;
  file:File;


  displayedColumns: string[] = ['orderId', 'customerId', 'deliveryPincode','orderDate', 'items' ];
  dataSource = new MatTableDataSource();

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }

  incomingfile(event) {

    this.file= event.target.files[0]; 

  }

  Upload() {
    let fileReader = new FileReader();
      fileReader.onload = (e) => {
          this.arrayBuffer = fileReader.result;
          var data = new Uint8Array(this.arrayBuffer);
          var arr = new Array();
          for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
          var bstr = arr.join("");
          var workbook = XLSX.read(bstr, {type:"binary"});
          var first_sheet_name = workbook.SheetNames[0];
          var worksheet = workbook.Sheets[first_sheet_name];

          this.dataSource = new MatTableDataSource(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
          this.dataSource.sort = this.sort;
          console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
      }
      fileReader.readAsArrayBuffer(this.file);
}
}

Answer 1

I would go for a Map() and ngFor, which gives you some stuff like this:

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

https://stackblitz.com/edit/angular-map-keyvalue

(seen here)

Answer 2

You can wrap the items in the p tag. This will also break this in the next line.