Reputation: 163
I am new to Angular js. I am trying to display the error message view toaster()
. I searched on google, but I didn't find the proper result. When I click on the cancel()
button, I will get an error saying toaster is not defined.
Html : <button class="btn btn-secondary" ng-show="editMode" ng-click="toggle_cancel()"> Cancel </button>
Angular Js :
$scope.toggle_erase = function(information){
toastr.toggle_erase('Are you sure want to delete ?')
$scope.hideDelay(3000):
}
Upvotes: 1
Views: 364
Reputation: 1229
You need to include toastr.js and toastr.css files.. Please check the example
// Code goes here
var app = angular.module('myapp',['toastr']);
app.controller('demo',function($scope,toastr){
$scope.toggle_remove = function(){
toastr.info('Hello!!');
toastr.refreshTimer(toastr, 3000);
}
});
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://npmcdn.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/angular-toastr/dist/angular-toastr.css" />
<script src="script.js"></script>
</head>
<div ng-app="myapp">
<div class="container" ng-controller="demo">
<button class="btn btn-secodary" ng-hide="editMode" ng-click="toggle_remove()"> Delete </button> <br/>
</div>
</div>
Please go through http://angular-js.in/angular-toastr/
Upvotes: 1
Reputation: 1036
In javascript : Your have to include respective toastr.js & toastr.css file in you project
//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js
//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css
and then use like below :
$.ajax({
url: url
type: "POST",
data: data,
async: false,
success: function(response) {
toastr.success('your success msg');
}
error : function(response){
toastr.error('your error msg');
}
});
for more details refer below link : https://github.com/CodeSeven/toastr
Upvotes: 0