Angular Material Dialog

Angular Material Dialog: It is very simple to create a dialog box in Angular Material. <md-dialog> Directive and $mdDialog Service is used to create Dialogs in Angular Material. Here in this tutorial we are going to explain how to create dialog box such as – Alert Box,Confirm Box, Prompt Box, Custom Dialog and Tab Dialog using this directive. You can also use our online editor to edit and run the code online.

Angular Material Dialog Example

Let us first create very basic dialog box in Angular Material-

   
      
      
      
      
      
      
	  
	 
      
   
    
  <div ng-controller="MyController" ng-cloak="">
  <md-content layout-padding="" layout="row">
	    <md-button class="md-primary md-raised" ng-click="showAlert($event)">
            Alert Box Dialog
            </md-button>
  </md-content>
  </div>
  
   

In the above example we have triggered alert box using JavaScript which uses default template, You can also use custom template.
If you run the above example it will produce output something like this –

Confirm Box

Here is javaScript part which contains the function for confirm box. Just call function showConfirmBox to trigger the confirm popup.You can create confirm box simply as below –

If you run the above example it will produce output something like this –

Prompt Dialog Box

JavaScript Part for prompt box is as below-

If you run the above example it will produce the following output –

Pre-Rendered Dialog | Modal Example

Sometimes we need pre-rendered dialog rather than adding the content from Script. It pre-rendered dialog template is not executed each time. It is very simple to create pre-rendered dialog. Here is an example of creating pre-rendered dialog.

   
      
      
      
      
      
      
	  
	 
      
   
    
  <div ng-controller="MyController" ng-cloak="">
  <md-content layout-padding="" layout="row">
	    <md-button class="md-primary md-raised" ng-click="showPrerenderedDialogBox($event)">
            Show Pre Rendered Dialog
            </md-button>
<div>
    <div class="md-dialog-container" id="myDialogBox">
      <md-dialog layout-padding="">
        <h2>Pre-Rendered Dialog Box Example</h2>
        <p>
          Content goes..... here. 
        </p>
      </md-dialog>
    </div>
  </div>
  </md-content>
  </div>