I am using MatDialog and trying to add a new line in the content definition. Both n
and </b>
are not doing it. Is there another way without having to manually go into the html and change it since it’s a reusable component:
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:nn"+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>
Advertisement
Answer
You can use the [innerHTML] property:
<p [innerHTML]="data.content"></p>
and instead of nn, use the html br tag.
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>`} });