How To Implement Toaster In AngularJS

AngularJS Toaster is an AngularJS port of the popular toastr jQuery library, offering a straightforward way to display non-blocking notifications in AngularJS applications.

Prerequisites

Before integrating AngularJS Toaster into your application, make sure you meet the following requirements:

• AngularJS Version: You need AngularJS version 1.2.6 or higher.
• angular-animate: To enable smooth CSS3 transitions for the notifications, angular-animate is required.

To show a notification in AngularJS you need to install toaster. There are two ways to install AngularJS Toaster:

1. Via NuGet Package Manager: The easiest method is to install it using the NuGet Package Manager if you are working with a .NET-based project.

2. Download Directly: Alternatively, you can download the package directly from its GitHub repository: AngularJS Toaster GitHub Repository.

Setup in HTML

After installing AngularJS Toaster, the next step is to integrate it into your application's layout. You need to add the toaster container to your main layout or index.html file.

<div class="page-content">
     <toaster-container toaster-options="{'close-button':true, 'time-out':{ 'toast-success': 2000, 'toast-error': 7000 } }"></toaster-container>
     @RenderBody()
</div>

Here, the <toaster-container> element defines where the notifications will appear on the page. You can customize the toaster options such as enabling a close button and setting different timeout durations for success and error messages.

• toast-success: The timeout for success notifications (e.g., 2000 milliseconds).
• toast-error: The timeout for error notifications (e.g., 7000 milliseconds).

Using Toaster in AngularJS Controller

Once the toaster is set up in your layout, you can now use it to display notifications from within your AngularJS controllers. Whether you want to notify the user about a successful action or alert them to an error, the process is seamless.

$scope.edit = function (invoiceTemplate) {
    invoiceTemplateService.update(invoiceTemplate).then(function (response) {
        // Display success notification
        toaster.success({ title: "Success", body: "Your data has been successfully saved!" });
        $scope.modalInstance.close();
    }, function (error) { 
        // Display error notification
        toaster.error("Error", error.message); 
    });
};

In this example:

• When the update function of invoiceTemplateService is successful, a success notification is shown using toaster.success.
• If an error occurs, the error message is displayed using toaster.error.

Customizing Notifications

AngularJS Toaster allows you to customize the notifications in a variety of ways, including:

• Custom titles and bodies: Provide your own text for both the notification title and message.
• Success and error styling: Success messages are often styled with a green color, while error messages are styled with red. These default styles can be customized to suit your app’s design.
• Auto-dismiss: Notifications automatically disappear after a specified timeout, but this can be adjusted or disabled entirely.