Angular dialog example

In this post I'll explain how to create Angular dialog based on Angular Material. We'll work on 4 type of dialog.

• Alert Dialog.
• Confirm Dialog.
• Tab Dialog.
• Custom Dialog.

1. Alert Dialog

- Create a button which will be click on to show alert dialog

 <md-button class="md-primary md-raised" ng-click="showAlert($event)" flex-sm="50" flex-md="100" flex-gt-md="20">  
    Show Alert Dialog  
  </md-button>  

- CSS

 .dialogdemoBasicUsage #popupContainer {  
  position: relative;  
 }  
 .dialogdemoBasicUsage .footer {  
  width: 100%;  
  text-align: center;  
  margin-left: 20px;  
 }  
 .dialogdemoBasicUsage .footer,  
 .dialogdemoBasicUsage .footer > code {  
  font-size: 0.8em;  
  margin-top: 50px;  
 }  

- And then Js with showAlert function

 $scope.showAlert = function(ev) {  
   $mdDialog.show(  
    $mdDialog.alert()  
    .parent(angular.element(document.querySelector('#popupContainer')))  
    .clickOutsideToClose(true)  
    .title('Alert title')  
    .textContent('This is a alert message.')  
    .ariaLabel('Alert Dialog Demo')  
    .ok('OK')  
    .targetEvent(ev)  
   );  
  };  

Demo

   2. Confirm Dialog.
        This example will help you know how to make a confirm dialog by AngularJs Material.

         Description:: after user choose products and then click delete button this confirm dialog will be displayed.

How to do.
- Create a button which will be click on to show alert dialog

  <md-button class="md-primary md-raised" ng-click="showConfirm($event)">  
    Confirm Dialog  
   </md-button>  

- Add Css

 .dialogdemoBasicUsage #popupContainer {  
  position: relative; }  
 .dialogdemoBasicUsage .footer {  
  width: 100%;  
  text-align: center;  
  margin-left: 20px; }  
 .dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code {  
  font-size: 0.8em;  
  margin-top: 50px; }  
 .dialogdemoBasicUsage button {  
  width: 200px; }  
 .dialogdemoBasicUsage div#status {  
  color: #c60008; }  
 .dialogdemoBasicUsage .dialog-demo-prerendered md-checkbox {  
  margin-bottom: 0; }  

- And then Js with showAlert function

  $scope.showConfirm = function(ev) {  
   // Appending dialog to document.body to cover sidenav in docs app  
   var confirm = $mdDialog.confirm()  
      .title('Would you like to delete this products?')  
      .textContent('All products will be deleted if you choose Yes.')  
      .ariaLabel('Lucky day')  
      .targetEvent(ev)  
      .ok('Yes!')  
      .cancel('No');  
   $mdDialog.show(confirm).then(function() {  
    $scope.status = 'You decided to delete.';  
   }, function() {  
    $scope.status = 'You decided to keep your products.';  
   });  
  };  

Demo


   3. Tabs Dialog.
        on-going
   4. Custom Dialog.
       on-going