Rafiu Rafiu - 3 months ago 80
AngularJS Question

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

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 type of the error messages like error, warning and success.

Answer

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.