How to add html Content on Snackbar in angular material?

Admin 1
Viewed 10172

I have created toaster(snackbar) for response message. I want to add an html content on toaster(snackbar) so that multiple message can be display in proper format.

I have tried 

var test ='<html> <body>' + '<h1>The Header</h1>'  +  '<p>The paragraph of text</p>' + '</body>  </html>';


this._toastr.error(test);
 _toastr : is my service.
 .error  : is my function in which I have to pass htmlContent

My code

var test = '<html> <body>' + '<h1>The Header</h1>'  +  '<p>The paragraph of text</p>' + '</body>  </html>';

this._toastr.error(test);

OUTPUT SHOULD BE:- The prices for the below xxx/ xxx have already been entered for 27 Nov 2018.

  1. Hello world!
  2. Hello people!

I want this thing in toster(snackbar)

Need Output like this which should be in html table Content

angular5 angular-material
1 Answers

You will not get around creating a custom SnackBar component as Edric mentioned in his comment/link. Standard Angular Material SnackBars only allow you to set a message and action (as well as some configuration options).

Check this stackblitz for a very rudimentary SnackBar component that reads an HTML string from the data passed to it and renders the string content as HTML in the snackbar.

snackbar.component.ts

export class SnackbarComponent { 
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any,
              public snackBar: MatSnackBar) {
  }
}

snackbar.component.html

<div [innerHTML]="data.html"></div>
<button mat-raised-button (click)="snackBar.dismiss()">Dismiss</button>

Use the component like this:

openSnackbar() {
  this.snackBar.openFromComponent(SnackbarComponent, {
    data: {
      html: '<h1>The Header</h1><p>The paragraph of text</p>'
    }
  });
}

You could easily wrap it in a service if that is what you need.

user_46060400
Related