Добавление новой строки в MatDialog Content Angular 7

Question

Я использую MatDialog и пытаюсь добавить новую строку в определение содержимого. И \n, и </b> этого не делают. Есть ли другой способ без необходимости вручную заходить в HTML и изменять его, так как это многократно используемый компонент:

var status: MatDialogRef<GenericDialogComponent> this.dialog.open(GenericDialogComponent,{
     width: '400px',
    data: {title: "Sample Title?", content: "Document " + this.docID + " has been saved. The users email address is provied below:\n\n"+this.email+"</b>"} });

HTML

<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
  <p>{{data.content}}</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="Cancel()">Cancel</button>
  <button mat-button (click)="Ok()" cdkFocusInitial>Ok</button>
</div>

Answer 1

Вы можете использовать свойство [innerHTML]:

<p [innerHTML]="data.content"></p>

и вместо \ n \ n используйте тег html br.

const status: MatDialogRef<GenericDialogComponent> this.dialog.open(GenericDialogComponent,{
     width: '400px',
    data: {title: "Sample Title?", content: `Document ${this.docID} has been saved. The users email address is provied below:<br /><b>${this.email+}</b>`} });

Answer 2

Попробуйте использовать HTML-тег <pre> , если вам нужно / хотите использовать \n.

Но я бы предложил ответ Кристиана Бенселера !

Answer 3

Попробуйте:

<div mat-dialog-content [innerHtml]="'<p>' + data.content + '</p>'">

EDIT @ Кристиан Бенселер ответ лучше / красивее.