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"));