Angularjs toastr: Show toast at the bottom right

Question

I am new to using toastr. The question I have is how to override the positionClass and show the toast at the bottom right.

I know you can do this in the html using the options but I dont want that in my html. I have 20 crud pages I need to manage. Adding for each page is just not right. So I used the toast as a service and I can use it in the controller of each crud.

     (function() {
        "use strict";

        angular.module("app").factory('ToastService', function($mdToast, toastr) {


            //http://codeseven.github.io/toastr/demo.html
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-bottom-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "6000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };

      return {

                info: function(content, title) {
                    if (!content) {
                        return false;
                    }

                    return toastr.info(content, title, {
                        timeOut: toastr.options.timeOut
                    });
                },


                success: function(content, title) {
                    if (!content) {
                        return false;
                    }

                    return toastr.success(content, title, { timeOut: toastr.options.timeOut});
                },

        error: function(content, title, time) {
            if (!content) {
                return false;
            }
            return toastr.error(content, title, {
                timeOut: time
            });
            //
        },

        };
    });
})();

In the controller I call it just like this.

  ToastService.error('Connection interrupted!', 'Server Error');

But instead of the default position at the top right, I want to show it at the bottom right.

Thanks!

Answer 1

toastr is popping up from the bottom right for me with the following options set via:

config.js (cref: John Papa -Pluralsight)

(function () {
    var app = angular.module('app');
    // Configure Toastr
    toastr.options.timeOut = 4000;
    toastr.options.positionClass = 'toast-bottom-right';
    toastr.options.showMethod = 'slideDown';
    toastr.options.hideMethod = 'slideUp';
    var config = {
        version: '1.1.0',
        ...
    };
    app.value('config', config);
})();

Could you have a CSS issue?