line don't break with \n angular - html

Question

I have a problem when i do this :
DetailDisplayer(row) : String {
let resultAsString = "";
console.log(row.metadata.questions.length);
(row.metadata.questions.length != 0 )?resultAsString += "Questions :" + row.metadata.questions.join("\n") + "\n" : resultAsString += "Questions : " + "No questions" + "\n";
(row.metadata.startDate)?resultAsString += "Start date : " + row.metadata.startDate + "\n" : resultAsString += "Start date : " + "No date" + "\n";
(row.metadata.endDate)?resultAsString += "End date : " + row.metadata.endDate + "\n" : resultAsString += "Date de fin : " + "Aucune date" + "\n";
console.log(resultAsString);
return resultAsString;
}
(by default, all of these tests are false)
my output on my html is
Questions : No questions Start date : No date End date : No date
With this html code :
<ngx-datatable-row-detail rowHeight="auto" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
<div style="padding-left:35px;">
<div><strong>DETAILS</strong></div>
<div>{{ DetailDisplayer(row) }}</div>
</div>
</ng-template>
</ngx-datatable-row-detail>
I'm using row details function of the ngx datatable Angular component.
console.log(resultAsString); displayed me what i wish :
Questions : No questions
Start date : No date
End date : No date
So i don't understand why there is no break line displayed on my app. If somebody can help me to understand, thank you by advanced.
Julian

Answer 1

You should add the style white-space: pre; to div with DetailDisplayer. Try this:
<ngx-datatable-row-detail rowHeight="auto" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
<div style="padding-left:35px;">
<div><strong>DETAILS</strong></div>
<div style="white-space: pre">{{ DetailDisplayer(row) }}</div>
</div>
</ng-template>
</ngx-datatable-row-detail>

Answer 2

Just apply the CSS property/value to your element white-space: pre-line;.
Most HTML elements will not display \n as a new-line by default.