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.
- Hello world!
- Hello people!
I want this thing in toster(snackbar)
angular-material angular5
edited Dec 28 '18 at 9:48
Fabian Küng
370210
asked Dec 28 '18 at 6:03
Sumit SinghSumit Singh
145
add a comment |
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.
- Hello world!
- Hello people!
I want this thing in toster(snackbar)
angular-material angular5
edited Dec 28 '18 at 9:48
Fabian Küng
370210
asked Dec 28 '18 at 6:03
Sumit SinghSumit Singh
145
Possible duplicate of Insert a link into MatSnackBar
– Edric
Dec 28 '18 at 7:36
no. that is different
– Sumit Singh
Dec 28 '18 at 9:50
P.S. You can't have multiple<html>and<body>elements. They can only be specified once.
– Edric
Dec 28 '18 at 9:59
add a comment |
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.
- Hello world!
- Hello people!
I want this thing in toster(snackbar)
angular-material angular5
edited Dec 28 '18 at 9:48
Fabian Küng
370210
asked Dec 28 '18 at 6:03
Sumit SinghSumit Singh
145
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.
- Hello world!
- Hello people!
I want this thing in toster(snackbar)
angular-material angular5
angular-material angular5
edited Dec 28 '18 at 9:48
Fabian Küng
370210
asked Dec 28 '18 at 6:03
Sumit SinghSumit Singh
145
edited Dec 28 '18 at 9:48
Fabian Küng
370210
asked Dec 28 '18 at 6:03
Sumit SinghSumit Singh
145
edited Dec 28 '18 at 9:48
Fabian Küng
370210
edited Dec 28 '18 at 9:48
Fabian Küng
370210
edited Dec 28 '18 at 9:48
Fabian Küng
370210
370210
asked Dec 28 '18 at 6:03
Sumit SinghSumit Singh
145
asked Dec 28 '18 at 6:03
Sumit SinghSumit Singh
145
asked Dec 28 '18 at 6:03
Sumit SinghSumit Singh
145
145
Possible duplicate of Insert a link into MatSnackBar
– Edric
Dec 28 '18 at 7:36
no. that is different
– Sumit Singh
Dec 28 '18 at 9:50
P.S. You can't have multiple<html>and<body>elements. They can only be specified once.
– Edric
Dec 28 '18 at 9:59
add a comment |
Possible duplicate of Insert a link into MatSnackBar
– Edric
Dec 28 '18 at 7:36
no. that is different
– Sumit Singh
Dec 28 '18 at 9:50
P.S. You can't have multiple<html>and<body>elements. They can only be specified once.
– Edric
Dec 28 '18 at 9:59
Possible duplicate of Insert a link into MatSnackBar
– Edric
Dec 28 '18 at 7:36
Possible duplicate of Insert a link into MatSnackBar
– Edric
Dec 28 '18 at 7:36
no. that is different
– Sumit Singh
Dec 28 '18 at 9:50
no. that is different
– Sumit Singh
Dec 28 '18 at 9:50
P.S. You can't have multiple
<html> and <body> elements. They can only be specified once.– Edric
Dec 28 '18 at 9:59
P.S. You can't have multiple
<html> and <body> elements. They can only be specified once.– Edric
Dec 28 '18 at 9:59
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Dec 28 '18 at 10:15
Fabian KüngFabian Küng
370210
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53954319%2fhow-to-add-html-content-on-snackbar-in-angular-material%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Dec 28 '18 at 10:15
Fabian KüngFabian Küng
370210
add a comment |
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.
answered Dec 28 '18 at 10:15
Fabian KüngFabian Küng
370210
add a comment |
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.
answered Dec 28 '18 at 10:15
Fabian KüngFabian Küng
370210
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.
answered Dec 28 '18 at 10:15
Fabian KüngFabian Küng
370210
edited Dec 28 '18 at 10:20
answered Dec 28 '18 at 10:15
Fabian KüngFabian Küng
370210
answered Dec 28 '18 at 10:15
Fabian KüngFabian Küng
370210
answered Dec 28 '18 at 10:15
Fabian KüngFabian Küng
370210
370210
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53954319%2fhow-to-add-html-content-on-snackbar-in-angular-material%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of Insert a link into MatSnackBar
– Edric
Dec 28 '18 at 7:36
no. that is different
– Sumit Singh
Dec 28 '18 at 9:50
P.S. You can't have multiple
<html>and<body>elements. They can only be specified once.– Edric
Dec 28 '18 at 9:59