Angular ngToast not showing

905 Views Asked by At

I have an Angular app inside an asp.net mvc app. I cannot get ngToast to work. No toast message is showing and I don't see any errors. Thank you in advance for your help.

BundleConfig.cs

//angular scripts
        bundles.Add(new ScriptBundle("~/bundles/angular").Include(
          "~/Scripts/angular.js",
          "~/Scripts/angular-route.js",
          "~/Scripts/angular-animate.js",
          "~/Scripts/angular-sanitize.js",
          "~/Scripts/ngmodules/angular-modal-service.js",
          "~/Scripts/modules/ngToast.js",
          "~/Scripts/i18n/angular-locale_el-GR.js",
          "~/Scripts/ngmodules/ng-qtip2.js",
          "~/Scripts/ngmodules/ng-lodash.js",
          "~/Scripts/angular-summernote.min.js"
          ));
          bundles.Add(new StyleBundle("~/plugins/ngtoast").Include(
                "~/Content/plugins/ngToast/ngToast.css"
          ));

Angular app:

 var app = angular.module('messagingApp', [
     // Angular modules 
       'ngAnimate',
       'ngRoute'
     // 3rd Party Modules
     , 'ngToast'
     , "angularModalService"
     , "summernote"

]);

In ng controller (I am including one function with ngToast.create()):

    (function () {
    "use strict";
    angular
        .module('messagingApp')
        .controller('messagecontroller', mController);

    mController.$inject = ['$scope', '$location', "$window", "$filter", "$routeParams", "$route", "$rootScope", "ngToast", "mService"];

    function mController($scope, $location, $window, $filter, $routeParams, $route, $rootScope, ngToast, mService) {

        //some functions    



        $scope.refreshMailbox = function () {
            mService.getMessagesCount().then(function (data) {
                $scope.inboxCount = data.CountInbox;
                $scope.sentCount = data.CountSent;
                if (data.CountNew > $scope.newCount) {
                    ngToast.create('You have new messages');                    
                }
                $scope.newCount = data.CountNew;
                $scope.importantCount = data.CountImportant;
            });

            mService.getInbox($scope.currentPage).then(function (data) {
                $scope.messages = data.Messages;
                $scope.currentPage = data.CurrentPage;
            });
        }

    };
})();

And in my cshtml end of file

@Styles.Render("~/plugins/ngtoast")
@Scripts.Render("~/bundles/angular")
//other scripts

1

There are 1 best solutions below

0
On

You need to use ngToast configuration for this to work.

ngToast.configure({
     verticalPosition: 'top',
     horizontalPosition: 'right',
     maxNumber: 3,
     dismissButton: true,
     timeout: 3000
});

Something like this to get it work, only if injection is correct.