CODEWITHSUNDEEP
javascriptangularangular-material
Flash
Flash

Reputation: 1014

Adding a new line in MatDialog Content Angular 7

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:\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>

Upvotes: 7

Views: 13341

Answers (5)

Florin
Florin

Reputation: 1

This worked for me:

        let warningMessages = ['message1','message2','message3'];

        const config=  {
            panelClass:'msg-dialog-container',
            data: {
                type:WARNNING,
                showConfirm:true,
                message: warningMessages
            }};

Upvotes: 0

rob cairney
rob cairney

Reputation: 11

In case others find it useful when hitting this answer, for my needs, I have copied the configuration of a generic dialog and service from Building a reusable dialog module with Angular Material

And by using the earlier answer where HTML <br/> was set into the string in code, I separated out this by using a Pipe (useful in other display needs too), of course this assumes a dialog is only doing a small amount of data display not showing a whole book chapter ;-)

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'newlineToBR',
})
export class NewlineToBRPipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\n/g, '<br/>');
  }
}

in the common dialog component:

<div mat-dialog-content>
      <p class="dialog-message" [innerHTML]="data.message | newlineToBR"></p>
    </div>

then in the component calling the dialog, there is no HTML tags, just make sure to add in newlines in editor and use the correct quote mark type:

const options = {
title: 'Confirm De-select of Review Required',
message: `If you select OK then all the following fields will be reset:
- start date
- assigned person`,
cancelText: 'CANCEL',
confirmText: 'OK',

};

Upvotes: 1

Christian Benseler
Christian Benseler

Reputation: 8075

You can use the [innerHTML] property:

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

and instead of \n\n, 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>`} });

Upvotes: 15

Tim VN
Tim VN

Reputation: 1193

Try:

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

EDIT @Christian Benseler's answer is better/prettier.

Upvotes: 2

Alex Mougenet
Alex Mougenet

Reputation: 233

Try to use the <pre> HTML tag if you need/want to use \n.

But I would suggest Christian Benseler's answer !

Upvotes: 2

Related Questions