vrghost February 2016

Does Angular Material have predetailed textboxes (ala bootstrap alert)

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?

Answers


nitin February 2016

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>


patorjk March 2016

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.

Post Status

Asked in February 2016
Viewed 3,626 times
Voted 13
Answered 2 times

Search




Leave an answer