Angularjs toaster

Angularjs toaster

In this article we will learn to apply toaster in any angularjs application. So first of all we need to included the below files in our front end part(in our html section).

<link href="" rel="stylesheet" />

<script src="" ></script>

<script src=""></script>



After that we need to inject the toaster in our angular controller like below.


app.controller('homeCtrl', ['$scope','$http','$cookieStore','toaster', function($scope,$http,$cookieStore,toaster) {


Then whenever we want toaster we need to put the below code in that block either on success or on failure condition in our angularjs code


toaster.pop('error', "Error", 'Error occured! Please try later.');


The above line will throw error in falure case. And the last step is to put the below code into the current html page.


<toaster-container toaster-options="{'close-button': true}"></toaster-container>


That’s all we need for the app to work. We’re done!

You can download complete code from here. Download Code