Ngx-toastr: create toaster in div container

Created on 18 Jul 2017  路  9Comments  路  Source: scttcper/ngx-toastr

Trying to get toaster into own div container, but doesn't appear to be working, followed instructions in readme. the toaster does appear just not from the container i was expecting.

are there any additional steps or an example of this working some where?

Cheers

Most helpful comment

@muniom you're right. ToastContainerModule needs to be imported in the module where you're trying to use it. Having a forRoot function on it is misleading. I've removed that in 6.4.0.

Please import ToastContainerModule where you need the directive available.

All 9 comments

I've updated the readme with more clear instructions. Let me know if that gets you anywhere.

https://github.com/scttcper/ngx-toastr/blob/master/README.md#put-toasts-in-your-own-container

Put up a repo where I have it working https://github.com/scttcper/toastrdiv

Thanks, will take a look at this later.

Thanks for the updated readme and examples but needed to add other directives to the div and no matter what I tried the additional directives just didn't seem to get picked.
Thanks again, will revisit this issue when I can get to it.

Hi readme not work to me! I want to open the toast inside a DIVtoo

The toast do not appears, if i change positionClass appears according the css class, but overlay not inside a dive with the directive.

@ceoaliongroo please create a new issue.

I also have this same issue, it is not another issue, does not work as per readme

update: made a plnkr to demo, & of course it works... still not entirely sure why it wasn't working elsewhere, but figured i should update this post with a demo. It was possibly wither silently swallowing a ExpressionChangedAfterItHasBeenCheckedError as putting the first notification into a timeout i think helped
Working demo toastContainer in childComponent: https://embed.plnkr.co/yiXiqmmJt3BwrYj0JZOl

update2: My issue was that ToastContainerDirective was not being registered globally by ToastContainerModule.forRoot(). Instead, putting ToastContainerDirective in the Declarations & Exports of my shared.module made @ViewChild(ToastContainerDirective) actually return something in components other than just app.component

@muniom you're right. ToastContainerModule needs to be imported in the module where you're trying to use it. Having a forRoot function on it is misleading. I've removed that in 6.4.0.

Please import ToastContainerModule where you need the directive available.

I also had the problem, that this only worked for standard toasts. Custom toasts were not placed on the container. Adding {static: true} to the @ViewChild declaration seems to fix the problem.

@adlh you are right. It works for me after adding static true.
@scttcper can you maybe update the documentation?

  @ViewChild(ToastContainerDirective, {static: true}) toastContainer: ToastContainerDirective;
Was this page helpful?
0 / 5 - 0 ratings