Reputation: 1076
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!
Upvotes: 1
Views: 2544
Reputation: 1050
toastr is popping up from the bottom right for me with the following options set via:
(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?
Upvotes: 1