Original Toastr with Angular 5?

Question

I like the original toastr b/c I could pop up a "Item X Saved" message and it stays on the page for X milliseconds after I redirect back to the home page. So I would like to use the original toastr library with Angular 5 and can't figure it out. Is there a blog post or online sample that shows this?

Note: I know that there are npm packages like angular2-toaster and a few others, but when I try to install and run them using Angular 5 CLI there are numerous error messages and when I look at their Github page they have outstanding issues and it just seems that Ag5 had enough breaking changes where they just aren't working yet without analyzing the source code and hacking it out (and I'm no npm expert obviously). Seems like they worked with Ag4 but not with Ag5?

Since toastr is a standard JS library, why can't I just add a link to the min.js file in angluar-cli.json "scripts" and show a standard popup like the good old days before SPA? I've downloaded and fought with so many of these npm libraries tonight it seems like it has been much harder than it should be to use a standard library that has been around for years.

Thanks.

Answer 1

I highly recommend you Angular Material to do that.

Once you've installed it (it works with Angular 5 and the installation procedure is very easy to follow), all you need is

private constructor(private snacker: MatSnackBar) {}
// ...
toast() { this.snacker.open('Text to display', 'Button text', { duration: 2000 }); }

Answer 2

for toastr you can check this link and follow the instruction this will support for angular 5

https://www.primefaces.org/primeng/#/growl

with angular 5 you can use the external CDN or link

method:1 install npm package for the toastr

npm install --save toastr

in .angular-cli.json file in scripts array import script from installed node module

 "../node_modules/...../toastr.min.js

and in styles array import your CSS file

"../node_modules/...../toastr.min.css

If this is not working then include CDN in index.html file

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>    
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />

and in component just declare the variable like below and start using your native toastr from https://github.com/CodeSeven/toastr

declare var toastr;

Answer 3

ngx-toastr is up to date, supported, and actively publishing. As of posting this, it is doing about 31k downloads per week on NPM, and due to switching names from ng2-toastr about a year ago, it appears users are just slow to switch (ng2-toastr is currently doing about 8k downloads per week).

I installed it last night in my Angular 6 app (I came across your question while I was Googling the same need), and I had it up and running in minutes with no build warnings or errors, no new npm audit vulnerabilities listed, or any other issues. Follow the brief instructions under "Setup", and It Just Works.

NPM link: https://www.npmjs.com/package/ngx-toastr