CODEWITHSUNDEEP
angular-materialangular5
user6650571
user6650571

Reputation:

How to add html Content on Snackbar in angular material?

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

Upvotes: 10

Views: 14550

Answers (2)

Bart
Bart

Reputation: 16

Use the component like this:

openSnackbar() {
    this.snackBar.openFromComponent(SnackbarComponent, {
        data: {html: '<h1>The Header</h1><p>The paragraph of text</p>'},
        **duration: 20000, verticalPosition: 'bottom', panelClass: ['error-snackbar']**
    });
}

Upvotes: 0

Fabian K&#252;ng
Fabian K&#252;ng

Reputation: 6183

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.

Upvotes: 19

Related Questions