How to use custom theme and template together in $mdToast of angular material

Question

I have following css to apply to mdToast for different response for e.g. SUCCESS,ERROR,INFO,WARNING.

md-toast.md-error-toast-theme div.md-toast-content{
    color: white !important;
    background-color: red !important;
}

md-toast.md-success-toast-theme div.md-toast-content{
    color: white !important;
    background-color: green !important;
}

and I want apply this theme css to below mdToast

$mdToast.show({
                templateUrl:'views/toast-template.html',
                controller:'ToastCtl',
                hideDelay:5000,
                controllerAs: 'toast',
                bindToController: true,
                locals:{message:message,type:type}
            });

I am able to use either theme or template successfully. However,I am not able to use template and theme together.

Answer 1

According to the documentation using a theme seems to be available only for $mdToast.simple()

It is not available as an option for $mdToast.show(optionsOrPreset). Not sure why. However, one can use the toastClass option to change the toast. Here is an example - CodePen

Markup

<div ng-controller="AppCtrl" class="inset toastdemoCustomUsage" ng-cloak="" style="height:300px; padding: 25px;" ng-app="MyApp">
  <md-button ng-click="showCustomToast()" class="md-raised" style="padding-left: 10px;padding-right: 10px;">
    Show Custom Toast
  </md-button>

  <script type="text/ng-template" id="toast-template.html">
    <md-toast>
      <span class="md-toast-text" flex>{{data.message}}</span>
      <md-button ng-click="closeToast()">Close</md-button>
    </md-toast>
  </script>
</div>

JS

(function() {
  angular
    .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('AppCtrl', function($scope, $mdToast) {

    $scope.showCustomToast = function() {
      var data = {type: "SUCCESS", message: "Well done!"};
      var toastClass;
      switch (data.type) {
        case "SUCCESS":
          toastClass = "success";
          break;
        case "ERROR":
          toastClass = "error";
          break;
        case "INFO":
          toastClass = "info";
          break;
        case "WARNING":
          toastClass = "warning";
          break;
      };

      $mdToast.show({
          hideDelay   : 3000,
          position    : 'top right',
          controller  : 'ToastCtrl',
          templateUrl : 'toast-template.html',
          locals: {
            data: data
          },
          toastClass: toastClass
        });
      };
    })
    .controller('ToastCtrl', function($scope, $mdToast, $mdDialog, data) {
      $scope.data = data;
      $scope.closeToast = function() {
        if (isDlgOpen) return;
        $mdToast
          .hide()
          .then(function() {
            isDlgOpen = false;
          });
      };
    });
})();

CSS

.success .md-toast-content  {
  background: green;
}
.error .md-toast-content  {
  background: red;
}
.info .md-toast-content  {
  background: orange;
}
.warning .md-toast-content  {
  background: purple;
}