How To Implement Toaster In AngularJS

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); });
}