AngularJS CRUD Using ASP.NET MVC5 – Add Toaster Notifications

In Previous article we learn how to add form data validations for CREATE and UPDATE Operation. In this article, we will learn how to add toaster notifications in our application.

You can download code for previous article from GitHub and start adding code for toaster notification.

So Let us start coding ??

Step-1: Download “toaster.css“, “toaster.js” and “angular-animate.min.js

Note: we need to also update angular.js version to AngularJS v1.5.6, because latest version v1.6.4 is not working with toaster.js and we need to downgrade to make toaster works with angularJS.

Now all set. dependencies are set in the project.

Step-2: Bundle this JS and CSS files in our project

Open “App_Start –> BundleConfig.cs” file and update the angular bundle

bundles.Add(new ScriptBundle("~/bundles/angular").Include(

Similarly css bundle:

bundles.Add(new StyleBundle("~/Content/css").Include(

Step-3: Include the ‘ngAnimate‘ and ‘toaster‘ module in your AngularJS app

Open “AngularJSApp\Employee\Module.js” file and add module like

myapp = angular.module('my-employees', ['toaster', 'ngAnimate', 'ui.bootstrap.showErrors']);

Note: ngAnimate module require if you want animations during toaster notification.

Step-4: Add ‘toaster-container‘ directive in Index.cshtml

By default, toasts have a timeout setting of 5000, meaning that they are removed after 5000 milliseconds. If the timeout is set to 0, the toast will be considered “sticky” and will not automatically dismiss. The timeout can be configured at three different levels:

Globally in the config for all toast types:

<toaster-container toaster-options="{'time-out': 1000}">

Per info-class type: By passing the time-out configuration as an object instead of a number, you can specify the global behavior an info-class type should have.

toaster-options="{'time-out':{ 'toast-success': 2000, 'toast-error': 0 } }">

We will add following toaster-options for our toasts to display.

toaster-options="{'close-button':true, 'time-out':{ 'toast-success': 2000, 'toast-error': 0 } }">

Success toasts will fade out after 2 seconds and error toasts will be sticky, until you close it. we also used close-button property which will show close button for all our toasts, so user can manually close our error toasts using close button.

Step-5: Usage of toaster in ng-controller

Let us update our JavaScript alert messages for success and failure for ‘employee-controller‘ in “AngularJSApp –> Employee –> Controller.js” by adding toaster notifications.

First, inject toaster module in our controller:

function ($scope, employeeService, toaster)

Then, you can use it any where in our controller.

For Success :

toaster.success({ title: "Success", body: "Employee added successfully" });

For error :

toaster.error("Error", "Error occured while loading employee data");

Similarly, you can update all other javascript alerts will toaster notifications for UPDATE and DELETE methods.

Step-6: Run the application.

Click on Add Employee Button. Provide input values in each fields and save the data.


You can see that it will give smooth effective notifications for success and it will fade out after 2 seconds.

Kool 🙂 Isn’t it?

Update Employee


Delete Employee


Code for this article is available on GitHub:

For more details on toaster, please refer this article:

That’s all for this article.

Please feel free to provide your feedback and comments.


2 thoughts on “AngularJS CRUD Using ASP.NET MVC5 – Add Toaster Notifications

  1. Pingback: AngularJS CRUD Using ASP.NET MVC5 – VS 2015 Project Setup and Read Employee Data – Ramani Sandeep's Blog
  2. Pingback: AngularJS CRUD Using ASP.NET MVC5 – Data Validations during CREATE and UPDATE Operation – Ramani Sandeep's Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s