Newline '\ n' doesn't work in Typescript

I am creating a list item in a typescript component to be displayed in the UI. List items should appear on separate lines. So I added a newline char \ n like below. But still the list items are displayed on one line. Below is the code. Any ideas why this isn't working?

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%;
}