Search code examples
javascriptangularjstoasttoastr

AngularJS toaster individual toast position

I have configured toasts globally in html

<toaster-container toaster-options="{'close-button': true, 'position-class': 'toast-bottom-right'}"></toaster-container>

and here is how i pop them

          core.toaster.pop({
              type: 'info',
              title: 'some title',
              timeout: 0
          });

I was wondering how I can position each toast individually and override global configuration from html. By default they are positioned bottom-right but for example I want one toast to be displayed top-right. Adding something like positionClass: 'toast-top-right' in toaster.pop doesn't work.

Solution

  • Try this,

    You can create another toaster container for your toaster, which You need to locate in different location by the use of toaster_id.

    See this plunker for working Model.

    Hope, This one will be helpful...