how can I change the color of Toast depends on message type in Angular material $mdToast?

Question

While using $mdToast.simple().content(\"some test\") it is showing the toast with black color. how can I change that color to red, yellow and so, depends on the typ

Answer 1

You did ask about using the simple toast call. Would you mind trying a custom toast show like the demo and add classes to the template?

JS

$mdToast.show(
  controller: 'ToastCtrl',
  templateUrl: 'views/shared/toast.html',
  hideDelay: 6000,
  position: $scope.getToastPosition()
)

TEMPLATE

  Custom toast!
  
   Close
  

CSS

md-toast.flash {
  background-color: red;
  color: white;
}

CONTROLLER (COFFEE)

'use strict'

###*
 # @ngdoc function
 # @name angularApp.controller:ToastCtrl
 # @description
 # # ToastCtrl
 # Controller of the angularApp
###
angular.module('angularApp')
  .controller 'ToastCtrl', ($scope) ->
    $scope.closeToast = ()->
      $mdToast.hide()