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

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


There is an easier way by specifying a theme:

$mdToast.simple().content("some test").theme("success-toast")

And in your CSS:

md-toast.md-success-toast-theme {    background-color: green;    ...}

You could incorporate your message type to dynamically select a theme.

Update:As Charlie Ng pointed out, to avoid warnings regarding use of an unregistered custom theme register it in your module using the theme provider: $mdThemingProvider.theme("success-toast")

Another update:There was a breaking change created on 2 Dec 2015 (v1.0.0+). You now need to specify:

md-toast.md-success-toast-theme {    .md-toast-content {        background-color: green;        ...    }}


EDIT:
For a correct implementation, please use rlay3s solution below :)!

OUTDATED:
I had problems displaying custom text with jhblacklocks solution, so I decided to do it like this using 'template':

var displayToast = function(type, msg) {    $mdToast.show({        template: '<md-toast class="md-toast ' + type +'">' + msg + '</md-toast>',        hideDelay: 6000,        position: 'bottom right'    });};

I also added the different types in my .css file:

.md-toast.error {    background-color: red;}.md-toast.success {    background-color: green;}

Don't know if this is the most beautiful approach, but I don't need a template files for each dialog type and displaying custom text is really easy.


register themes:

$mdThemingProvider.theme("success-toast");$mdThemingProvider.theme("error-toast");

add css:

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;}

use:

$mdToast.show(    $mdToast.simple()        .content(message)        .hideDelay(2000)        .position('bottom right')        .theme(type + "-toast"));