While working on a TypeScript component, I encountered an issue where list items were not being displayed on separate lines despite adding a new line character (\n) in the code. The list items continued to display on the same line. I have shared the relevant code below for reference. Can you help me understand why this isn't working as expected?
https://i.sstatic.net/8cxli.png
Here is the TypeScript code snippet:
@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;And here is the corresponding HTML code:
<ul id="excludedUl" required>{{ excludeDisplay }}</ul>
<ul id="includedUl" required>{{ includeDisplay }}</ul>Lastly, the CSS styles applied are as follows:
#includedUl {
float: right;
width: 33%;
}
#excludedUl {
float: right;
width: 33%;
}