How to display toaster message in Angularjs?

Question

Hello I am developing Angularjs Application. I am trying to display Toaster messages in my angular controller. I refereed http://angular-js.in/angular-toastr/. I am facing below issue. I am not able to call success,info etc notification from controller and i am getting annot read property 'success' of undefined error. I have tried as below.

In index.html i have added below code.

<!--Toaster-->
    <script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.css" />
    <!--Toaster-->

this is my main.js

var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
 //ui-routing states here});

app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate, toastr) {
    toastr.success('Hello world!', 'Toastr fun!');
    $scope.clickHandler = function (key) {

        $translate.use(key);
    };
}]);

May I know why I am facing issues here? any help would be appreciated. thank you

Sachila Ranawaka · Accepted Answer · 2017-04-11 04:27:30Z

2

add toastr as string dependency to the controller.

change this

app.controller('RoslpAppController', ['$scope', '$translate',function ($scope, $translate, toastr) {

to this

app.controller('RoslpAppController', ['$scope', '$translate','toastr',function ($scope, $translate, toastr) {

answered Apr 11, 2017 at 4:27

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niranjan Godbole Over a year ago

I am using ui routing so Everytime do i need to pass toaster in parent controller as dependency? –

Sachila Ranawaka Over a year ago

if you want to use the toaster inside the parent controller you need to pass it as a dependancy

Matej Marconak · Accepted Answer · 2017-04-11 04:26:24Z

2

You are missing toastr in controller definition.

app.controller('RoslpAppController', ['$scope', '$translate','toastr', function ($scope, $translate, toastr) {

answered Apr 11, 2017 at 4:26

Matej Marconak

1,4133 gold badges21 silver badges27 bronze badges

2 Comments

Niranjan Godbole Over a year ago

I am using ui routing so Everytime do i need to pass toaster in parent controller as dependency?

Matej Marconak Over a year ago

You need pass toaster in controller, in which you are using toaster.

Saurabh Agrawal · Accepted Answer · 2017-04-11 04:32:35Z

Try this

<html>
<head>
	<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css">

	<script>
		var app=angular.module("myapp", []);
		app.controller("namesctrl", function($scope){

			$(function () {
				$('#error').click(function () {
        // make it not dissappear
        toastr.error("Noooo oo oo ooooo!!!", "Title", {
        	"timeOut": "0",
        	"extendedTImeout": "0"
        });
    });
				$('#info').click(function () {
   		// title is optional
   		toastr.info("Info Message", "Title");
   	});
				$('#warning').click(function () {
					toastr.warning("Warning");
				});
				$('#success').click(function () {
					toastr.success("YYEESSSSSSS");
				});
			});


		});

		
	</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
	<input type="button" value="Error" id="error" />
	<input type="button" value="Info" id="info" />
	<input type="button" value="Warning" id="warning" />
	<input type="button" value="Success" id="success" />
	<br><br><br><br>
	See official example: <a href='http://codeseven.github.io/toastr/demo.html' target='blank'>Here</a>
</body>
</html>

Collectives™ on Stack Overflow

How to display toaster message in Angularjs?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related