Wednesday, July 8, 2015

How to add toaster in Angular JS

Index page:

 Open Home main (Container page) page  and add following references.
Remember, If you will add following lines in any of angular view, it will not work.


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

Add Toaster Tag


Main Angular App

var MyApplication = angular.module('myApp', ['toaster''ngAnimate']);

Service or controller using Toaster

(function (ng, app) {
    "use strict";
    app.service("LoginService",function (toaster) {
      this.Login = function (username, password) {
              toaster.pop('error'"title""texasdfasfas asdf asdf t");
      }// end of service function
 ); // end of service
})(angular, MyApplication);

Other toaster examples mentioned at Plunker are,

toaster.success({title: "title", body:"text1"});
        toaster.error("title", "text2");
        toaster.pop({type: 'wait', title: "title", body:"text"});
        toaster.pop('success', "title", '<ul><li>Render html</li></ul>', 5000, 'trustedHtml');
        toaster.pop('error', "title", '<ul><li>Render html</li></ul>', null, 'trustedHtml');
        toaster.pop('wait', "title", null, null, 'template');
        toaster.pop('warning', "title", "myTemplate.html", null, 'template');
        toaster.pop('note', "title", "text");
        toaster.pop('success', "title", 'Its address is', 5000, 'trustedHtml', function(toaster) {
            var match = toaster.body.match(/http[s]?:\/\/[^\s]+/);
            if (match) $[0]);
            return true;
        toaster.pop('warning', "Hi ", "{template: 'myTemplateWithData.html', data: 'MyData'}", 15000, 'templateWithData');

No comments:

Post a Comment