HTML - split the array values dynamically using comma seperated - html

Question

Using ng-repeat am showing array of values which am getting it from backend. But i want to split the specific values using comma seperated and displya it dynamically.
Please find the HTML code below.
<li ng-repeat="history in claimGroupingHistories">
<div class="row">
<div class="col-lg-4 col-md col-sm-4 col-xs-4">
<label>{{'claimgroup.history.oldvalueselected'|translate}}:</label>
</div>
<div id="historyOldValueSelected_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.oldValueSelected}}</div>
</div>
</div>
</li>
Here, in the {{history.oldValueSelected}} values will be like ABC1234, XYZ2345, IJK098. Instead of showing the value in single line. I want to split the value using comma seperated and display the value.
For Example :
Now, it showing like,
Old Value Selected : ABC1234, XYZ2345, IJK098
Expecting output like,
Old Value Selected : ABC1234
XYZ2345
IJK098
Splitting the array values dynamically using comma seperated.
Testdata :
[
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":null,
"newValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-22T18:42:59.000Z"
},
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":"Group by minimum claims, Customer Invoice or Repair Date",
"newValueSelected":"Group by minimum claims",
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-23T06:13:07.000Z"
},
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":"Group by minimum claims",
"newValueSelected":"Group by minimum claims, Customer Invoice No",
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-23T06:14:54.000Z"
},
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":"Group by minimum claims, Customer Invoice No",
"newValueSelected":null,
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-24T06:23:33.000Z"
},
{
"id":null,
"dealerCode":"T030",
"oldValueSelected":null,
"newValueSelected":"Customer Invoice No, Group by minimum claims",
"createdBy":"System Admin",
"createdAt":"2019-01-23T06:13:00.000Z",
"lastModifiedAt":"2019-01-24T06:23:58.000Z"
}
]

Answer 1

I am assuming history.oldValueSelected is a string, because if oldValueSelected was an array you could use ng-repeat like this:
<div layout="column">
<span ng-repeat="oldValue in history.oldValueSelected" ng-bind="oldValue"></span>
</div>
Now to oldValueSelected being a string. I can think of two options: You can either
split the values in the controller after you got your data
split it in ng-repeat
If you choose the second option, you can do the following:
<div layout="column">
<span ng-repeat="oldValue in history.oldValueSelected.split(', ')" ng-bind="oldValue"></span>
</div>
EDIT: I didn't get the expected output when I used class="row"
<li ng-repeat="history in $ctrl.histories">
<!-- class="row" didn't deliver the expected output-->
<div layout="row">
<div class="col-lg-4 col-md col-sm-4 col-xs-4">
<!-- For testing purposes - replace with your code-->
<label>{{history.name}}:</label>
</div>
<div layout="column">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" ng-repeat="oldValue in history.oldValueSelected.split(', ')">{{oldValue}}</div>
</div>
</div>
</li>
In the controller for testing purposes:
this.histories = [
{name: "number 1", oldValueSelected:"ABC1234, XYZ2345, IJK098"},
{name: "number 2", oldValueSelected:"ABC1234, IJK098"},
{name: "number 3", oldValueSelected:"IJK098"}
];

Answer 2

app.component.html
<div *ngFor="let hero of heroes.split(', ')">
{{ hero }}
</div>
app.component.ts
private heroes: string = "123123, 123123, 345354, 5675757";
Output:
123123
123123
345354
5675757