CODEWITHSUNDEEP
javascriptangularjstoastr
fablexis
fablexis

Reputation: 578

How to bind dynamic content to angular-toastr?

I'm using angular-toastr, and I want to have a dynamic content inside toastr, let's say, a counter, how can I update it with no other instance.

Here is my angular script:

// Code goes here
angular.module("myApp", ['toastr'])
.controller("myCtrl", myCtrl);

myCtrl.$inject = ["toastr"];

function myCtrl(toastr){
  var vm = this;
  vm.cont = 0;

  vm.start = function(){
    //I need create only one toastr with vm.cont update for each increment
    toastr.info(vm.cont + " en espera", 'Transferencias y pagos', {
      allowHtml: true,    
      extendedTimeOut: 0,
      tapToDismiss: true,
      timeOut: 0,
      onHidden: vm.listWaitView
    });
  };

  vm.increment = function(){
    vm.cont++;
    vm.start(); //function that trigger the toastr
  };
}

My view:

 <!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link data-require="[email protected]" data-semver="1.3.1" rel="stylesheet" href="https://rawgit.com/Foxandxss/angular-toastr/1.3.1/dist/angular-toastr.css" />
    <script data-require="[email protected]" data-semver="1.3.1" src="https://rawgit.com/Foxandxss/angular-toastr/1.3.1/dist/angular-toastr.tpls.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl as ctrl">
    <h1>Counter</h1>
    <h2>{{ctrl.cont}}</h2>
    <button ng-click="ctrl.increment();">Increment</button>
  </body>

</html>

For your convenience I made a simple script that I uploaded in plunkr:

Example:

https://plnkr.co/edit/w7WbfwyYqkqxQWsAPCZz?p=preview

Upvotes: 2

Views: 3069

Answers (2)

Wilt
Wilt

Reputation: 44356

You can also set new messages without removing the toast and adding a new one as proposed in the accepted answer.

When creating a toastr message you get an ActiveToast instance returned. On this active toast you can access a ToastRef instance throught the toastrRef property and from there you can get access a property componentInstance (by default an instance of Toast if you do not use your own custom component). On this Toast instance you can set a new message directly as follows:

const toast: ActiveToast = this.toastr.success('Something just happened');
const toastComponent: Toast = toast.toastRef.componentInstance;
setTimeout(
  () => toastComponent.message = 'Toast message has changed', 3000
);

This solution was mentioned by MikeAlexMartinez in the following GitHub issue inside the ngx-toastr repository:

Hope it will be useful for others ending up here.

Upvotes: 0

Pavan
Pavan

Reputation: 4329

Are you looking for clearing the existing toasts before creating new one. If yes, then try the below

toastr.clear();
toastr.info(vm.cont + " en espera", 'Transferencias y pagos', {
...

Here is the plunker. https://plnkr.co/edit/2fnYT6Oi7qzUnhW0KgRo?p=info

Upvotes: 2

Related Questions