Change dynamic class in mdDialog.show

Question

Change dynamic class in mdDialog.show

Navigation

#1 by (2 votes)

0

I need to change the class of the OK button, by default it is dynamic and has been set to '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
          );

angularjs angular-material

asked by anonymous 22.11.2016 / 12:47

1 answer

Separate a string in C # A white bar appears on the right margin causing the horizontal scroll

score 2 · Accepted Answer

1. You can change via the same CSS:

#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');

You can also create your own HTML template and pass as parameter to $ mdDialog :

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

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

NOTE: Do not forget to see the documentation of the Angular Material 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 Documentation Version .