Why is angular-toastr not accepting the overriden postionClass.?

Question

Plugin used: https://github.com/Foxandxss/angular-toastr

My intention is to create a toastr that spans the full with of the page on top and according to the documentation, positionClass: 'toast-top-full-width' will do the trick.

toastr.success('Hello world!', 'Toastr fun!', {
    positionClass: 'toast-top-full-width'
});

A peek into the plugins css also validate the claim.

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%;
}

But somehow, the code doesn't work. Whats wrong with my code?
Plunkr: http://plnkr.co/edit/2O6hjk5vnMUWWULNK9hs?p=preview

Answer 1

You need to configure the toast in the angular config.

var app = angular.module('app', ['ngAnimate', 'toastr']);

 app.config(function(toastrConfig) {
   angular.extend(toastrConfig, {
    positionClass: 'toast-top-full-width'
   });
 });

 app.controller('toastr-demo', function($scope, toastr) {
    toastr.success('Hello world!', 'Toastr fun!');
 });

Plunker: http://plnkr.co/edit/pdstz2WkJqdi1Qw0R1pX?p=preview