Ngx-toastr: progress HTML5 tag not rendered within toast

Created on 25 Jul 2018  路  3Comments  路  Source: scttcper/ngx-toastr

Hi,
I'm trying to display a progress bar as the message of a Toast notification but it's just not rendered. I'm setting enableHtml to true in the options, and tried rendering other HTML tags, like <h1></h1> and it worked fine. Not sure what the issue is but do you think it will be possible to admit displaying native HTML progress bars in the future?
I really like this component and it was not that hard to replace ng2-toastr with it.
I had to replace ng2-toastr because we updated our Angular app to v6 and we were getting build-time errors.
Let me know if you need any additional information or anything that would help.
Thank you.

All 3 comments

I believe it is the DOMSanitizer that's causing the progress bar to not show up. Why it strips the progress bar? I'm not sure.

https://github.com/scttcper/ngx-toastr/blob/99ea6d701a06c30faa186f63f925b8ee14ddfd29/src/lib/toastr/toastr.service.ts#L265-L268

@yarrgh thanks for pointing that out, I think that's likely the case.
I tried using Bootstrap 4's progress bar which requires inline styling to set the width, and it didn't work either because the style attribute was getting stripped off.

I don't think there's anything we can do here. Try creating a custom toast for your use case.

Was this page helpful?
0 / 5 - 0 ratings