CODEWITHSUNDEEP
angularangular-material
RRB
RRB

Reputation: 2116

Add body text to mat dialog

I am trying to add some body text to a mat dialog but can't seem to pass the text through

  openDialog(): void {
    const dialogRef = this.dialog.open(ConfirmComponent, {
      width: '350px',
      data: "Do you accept these terms and conditions?"
    });
    
    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        console.log('Yes clicked');
      }
    });
  }

dialog component

public dialogRef: MatDialogRef<ConfirmComponent>,
@Inject(MAT_DIALOG_DATA) public title: string,
@Inject(MAT_DIALOG_DATA) public message: string,

<h2 mat-dialog-title>{{title}}</h2>
<div mat-dialog-content>
  {{message}}
</div>
<div mat-dialog-actions>
  <button mat-button color="primary" (click)="onNoClick()">No</button>
  <button mat-button color="primary" (click)="onYesClick()">Yes</button>
</div>

So I am trying to pass a title and a message through to the data in the dialog

Upvotes: 1

Views: 1698

Answers (1)

HTN
HTN

Reputation: 3604

The @Inject(MAT_DIALOG_DATA) will inject your data. You must not use it twice, but only once such as:

@Inject(MAT_DIALOG_DATA) public data: {title: string; message: string}

<h2 mat-dialog-title>{{data.title}}</h2>
<div mat-dialog-content>
  {{data.message}}
</div>

And use it with MatDialog:

this.dialog.open(ConfirmComponent, {
      width: '350px',
      data: {
        title: "Confirmation message",
        message: "Do you accept these terms and conditions?",
      },
    });

Upvotes: 3

Related Questions