Change dynamic class on mdDialog.show

Question

I need to change the class of the OK button, by default it is dynamic and comes set 'Md-Primary'.

$mdDialog.show(
          $mdDialog.alert()
            .parent(angular.element(document.querySelector('#popupContainer')))
            .title('This is an alert title')
            .textContent('You can specify some description text in here.')
            .ariaLabel('Alert Dialog Demo')
            .ok('Got it!') // trocar a cor desse botão
          );

Answer 1

1. You can change via CSS itself:

#popupContainer button.md-primary {
  color: '#000' !important;
  background-color: blue !important;
}

2. Or, you can change the class via Javascript:

var btnElement = document.querySelector('#popupContainer button.md-primary');
btnElement.classList.remove('md-primary');
btnElement.classList.add('minha-classe');

3. You can also create your own html template and pass as parameter to the $mdDialog:

$mdDialog.show({ 
  templateUrl: 'dialog1.html'
});

See more examples on the documentation page of Angular Material - Dialog.

OBS: Don’t forget to see the Angular Material documentation according to the version of the file you are using in your project. The documentation version is in the left menu of the site, in the first item Documentation Version.