In this article, I'll show you how to show a notification using toaster in AngularJS.
AngularJS Toaster is an AngularJS port of the toastr non-blocking notification jQuery library. It requires AngularJS v1.2.6 or higher and angular-animate for the CSS3 transformations.
To show a notification in AngularJS you need to install toaster from Nuget Package Manager or you can download it directly from https://github.com/jirikavi/AngularJS-Toaster
Add toater to your shared layout or main index.html
<div class="page-content">
<toaster-container toaster-options="{'close-button':true, 'time-out':{ 'toast-success': 2000, 'toast-error': 7000 } }"></toaster-container>
@RenderBody()
</div>
Now you can use the toaster in your AngularJS controller to show notification a successful message or throw an error message.
$scope.edit = function (invoiceTemplate) {
invoiceTemplateService.update(invoiceTemplate).then(function (response) {
toaster.success({ title: "Success", body: "Your data has been successfully saved !" });
$scope.modalInstance.close();
}, function (error) { toaster.error("Error", error.message); });
}