Does Angular Material have predetailed textboxes (ala bootstrap alert) - angularjs

Question

Been playing around with angular material, and absolutely love it. But found one rather surprising thing, and almost certain I missed a page in the manual, or well, many pages including that one.
Thought I would add a warning text along the lines of "Thats not your password" for failed login. And from bootstrap I could easily do this with and alert box.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
However, I can't find a similar set for angular material. Yes, there are dialog, and toasts, but I wanted something simpler.
And yes I could write my own class, but it feels like there should be some predefined class for it?

Answer 1

I've been looking for such a feature too. The closest thing I can find is md-whiteframe. You can do an Angular Material type alert like this:
<div layout="row" layout-padding layout-wrap layout-fill>
<div md-whiteframe="3" class="padded">
Some text here
</div>
</div>
However, the md-warn class doesn't work with this directive.

Answer 2

as far i can see now there's no alert box in angular material like bootstrap
so i extract only alert css role from bootstrap
.alert {
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 5px; }
.alert-heading {
color: inherit; }
.alert-link {
font-weight: bold; }
.alert-dismissible {
padding-right: 2rem; }
.alert-dismissible .close {
position: relative;
top: -.125rem;
right: -1rem;
color: inherit; }
.alert-success {
background-color: #dff0d8;
border-color: #d0e9c6;
color: #3c763d; }
.alert-success hr {
border-top-color: #c1e2b3; }
.alert-success .alert-link {
color: #2b542c; }
.alert-info {
background-color: #d9edf7;
border-color: #bcdff1;
color: #31708f; }
.alert-info hr {
border-top-color: #a6d5ec; }
.alert-info .alert-link {
color: #245269; }
.alert-warning {
background-color: #fcf8e3;
border-color: #faf2cc;
color: #8a6d3b; }
.alert-warning hr {
border-top-color: #f7ecb5; }
.alert-warning .alert-link {
color: #66512c; }
.alert-danger {
background-color: #f2dede;
border-color: #ebcccc;
color: #a94442; }
.alert-danger hr {
border-top-color: #e4b9b9; }
.alert-danger .alert-link {
color: #843534; }

Answer 3

Yes Angular Material has Dialog, you can use Alert Dialog, documentation here
Add $mdDialog to your controller as dependency and customise below code.
$scope.showAlert = function(ev) {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};
Call showAlert() from your html
<md-button class="md-primary md-raised" ng-click="showAlert($event)" flex="100" flex-gt-md="auto">
Alert Dialog
</md-button>