New Line '\n' is not working in Typescript

Question

I am creating a list item in typescript component which will be displayed in the UI. The List items should be displayed in separate lines. So i added new line char \n as below. But still the list items are shown in same line. Below is the code. Any idea why it doesn't work?

Typescript Code:

@Output() excludeDisplay: any = '';
@Output() includeDisplay: any = '';
includeValues: any = '';
excludeValues: any = '';

this.includeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("include values are "+ this.includeValues);
this.excludeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("exclude values are "+ this.excludeValues);
this.includeDisplay = this.includeValues;
this.excludeDisplay = this.excludeValues;

Html Code:

<ul id="excludedUl" required>{{ excludeDisplay }}</ul>
<ul id="includedUl" required>{{ includeDisplay }}</ul>

CSS Code:

#includedUl {
  float: right;
  width: 33%;
}

#excludedUl {
  float: right;
  width: 33%;
}

Answer 1

Need to use fix width:

 <div style="width: 500px;white-space: pre-line">{{property}}</div>

In typescript use '\n' to add new line.