Search example

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  

    7 comments:

    1. The AngularJS framework works by first reading the HTML page, which has embedded into it additional custom tag attributes. This blog gives great view for Angular.js beginners. Learn Angular.js from the best Angular.js Online Training in your locality at CatchExperts.com

      ReplyDelete
    2. Thanks a lot for sharing this amazing knowledge with us. This site is fantastic. I always find great knowledge from it.
      Hire Angular JS Developer

      ReplyDelete
    3. Awesome tutorial . It is very helpful for web development and design. AngularJS is a very powerful JavaScript Framework. web design company jaipur

      ReplyDelete



    Popular Posts