Show array of strings as multiline text in mat-table

Question

I have a table, where each of the cell contents is populated by an array containing a varying number of string elements. I want to be able to display each string element on a new line within the same table cell.

E.G each array here will be contained within a single cell of the table

myArray = ["hello", "world", "my", "name", "is", "jim"]
myArray2 = ["this", "cell", "content"]

so the table should look like this

|    | hello   |
|    | world   |
|row1| my      |
|    | name    |
|    | is      |
|    | jim     |
----------------
|    | this    |
|row2| cell    |
|    | content |

I have tried using array.join('\r\n') but the table simply escapes those characters and just shows them in the cell text.

Any advice?

EDIT: HTML included for reference

<div class="table-container">
  <table mat-table class="mat-elevation-z8" id="myTable" [dataSource]="myData">
    <ng-container matColumnDef="column1">
      <th mat-header-cell *matHeaderCellDef>Column1</th>
      <td mat-cell *matCellDef="let element" [style.color]="element.fontColour" [style.background-color]="element.cellColour">
        {{ element.shortName }}
      </td>
    </ng-container>
    <ng-container matColumnDef="column2">
      <th mat-header-cell *matHeaderCellDef>column2</th>
      <td class="column2-cell" mat-cell *matCellDef="let element">
        {{ myArraysAsMultiline }} <!-- <--- THIS IS THE DATA I WANT AS A MULTILINE -->
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>

Answer 1

I have found a new way to solve the issue, the stings in the arrays are joined using myArray.join('\r\n') and in the css, the white-space field is set to pre-line.