Grid List Element (md-grid-list)

md-grid-listdirective encapsulates all the elements of a grid list.

1. Use an attribute "md-cols" to configure number of columns or cells in a row. In the preceding sample, we have two columns.

2. Consider making the grid responsive. Configure different numbers of columns depending on screen size. There is another example later in the chapter, which demonstrates this behavior.

3. Configure row height with an attribute md-row-height. In the preceding sample, we set it to 300px. We could set a value in rem or ratio of width and height. For example, 38rem and 3:4 are valid values.

4. Configure gutter size between tiles with the md-gutter attribute. Provide a value in px (pixels).

Grid Tile Directive ( md-grid-tile)

Each tile/item/cell is represented by a child element/directive md-grid-tile. In the preceding sample, we are iterating through the superheroes array (on scope) to create multiple grid tile elements.

A grid tile may contain the following. These are child elements/directives for a grid tile.

1. Header: Use md-tile-header for header on the tile. In general, it could be used for showing a title on the tile.

2. Footer: Use md-tile-footer for footer on the tile. In the sample, we are showing category information on the footer.

3. Workspace: We could show text or images in a tile. In the sample, we show images of superheroes.

It is not necessary to use all the child elements of md-grid-tile. A tile may contain a header, a footer, both of them, or neither of them. All possible combinations can be used.

On md-grid-tile, consider using attributes md-colspan and md-rowspan. This specifies number of columns or rows a given tile should occupy. This allows defining different sizes for each tile. We may choose to show a bigger first tile. Alternatively, a dynamic grid list layout where each tile’s size is defined by length of the content inside.

The following sample takes a simplistic approach. It marks the beginning of the grid list with a bigger tile. On the first tile, row span value is set to two. See Figure 8-5.

Figure 8-5. Grid list with row span on first tile

Consider the following code. Code in boldface uses an expression to identify the first tile and resize to occupy two rows. ng-repeat tracks index of an item while iterating through the list using a variable $index. If the value is 0, set rowspan to 2; for all other tiles set it to 1 (default size).

<md-grid-tile md-rowspan="{{($index===0)?2:1}}"  ng-class="item.background" ng-click="null" ng-repeat="item in superheroes">                                                                                                                          
                <img style="max-width:100px" ng-src="{{item.imageUrl}}" />

Responsive Attributes

Use responsive attributes to let the grid list adapt to different screen sizes. See Figure 8-6 and Figure 8-7.

Figure 8-6. Three columns on a large screensize (gt-md)

Figure 8-7. Single column and default row span for first tile on a small screen

Consider the following code.

<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3" md-row-height="16:9">
        <md-grid-tile md-rowspan-gt-sm="{{($index===0)?2:1}}" ng-class="item.background" ng-click="null" ng-repeat="item in superheroes">
        <img style="max-width:100px" ng-src="{{item.imageUrl}}" />

        <md-grid-tile-footer layout-padding>
            <span>{{item.category}}</span>
        </md-grid-tile-footer>
        <md-grid-tile-header layout-padding>
            <h2>{{item.name}}</h2>
        </md-grid-tile-header>    
    </md-grid-tile>                                  
</md-grid-list>

As the boldface code shows, md-cols sets the number of columns to one on a small screen, two on a medium-size screen, and three on a greater-than-medium screen. Also notice that on md-grid-tile, the rowspan logic described previously is applied to greater-than-small screens only. Thus, on a small screen a default value of one is applied for row span.

md-dialog Element

A dialog is encapsulated in md-dialog element/directive. It may contain one or more child elements/directives.

1. To show dialog content, use the element/directive md-dialog-content. On it, apply a CSS class md-dialog-content if padding is required.

2. Group all dialog action buttons (for example, OK, Cancel buttons) in md-dialog-actions element/directive.

3. These two elements take care of alignment and positioning for the dialog.

4. Like any other window, for a toolbar and title use md-toolbar element/directive.

The preceding template could be in a separate HTML file. For the sample, it has been included in the index.html page (in a template script) and provided with id "dialogTemplate.html". This template or the dialog is not shown until we explicitly make a call to show.

Inject a service $mdDialog into the controller. Use the show function on the service to show the dialog.

    $mdDialog.show({
        templateUrl: "dialogTemplate.html",
        parent: angular.element(document.body), // dialog is a child element of body
        clickOutsideToClose: true
    });

Notice clickOutsideToClose set to true. If this value is set to false, we might have to add a button to close the dialog (in md-dialog-actions).

The following are certain other configurations we can take advantage of, while showing a dialog.

1. template: Use template: '<!-- template -->' to provide template as a string instead of linking a template file.

2. onComplete: function(){} - Use onComplete callback function to run an action after show is complete.

3. openFrom: "#idOfTheElement" - The animation that depicts opening dialog zooms in from this element. This element could be placed on left, right, center (center is default for the dialog anyway), or any corner of the page.

4. closeTo: "#idOfTheElement" - The animation that depicts closing dialog zooms out to this element. This element could be placed on left, right, center (default for dialog anyway), or any corner of the page.

$scope.message = "Good Morning";
$mdDialog.show({
    templateUrl: "dialogTemplate.html",
    parent: angular.element(document.body), // alert is a child element of body

    clickOutsideToClose: true,
    locals: {                
       aTitle: $scope.message                
    },                
    controller: function($scope, aTitle){                
        $scope.title = aTitle;                
    }                
});                                                                                      

<md-dialog-content class="md-dialog-content">
    <h2>{{title}}</h2>              
    <strong>
        Dialog be... <!-- rest of the template as in earlier example -->

Alert Dialog

Alert is used for information purposes and will only contain an OK button to close the dialog.

Consider Figure 8-9 and the following code. This approach allows creating an alert reference and reusing it. We create an alert with the following code. It is not shown to the user yet.

Figure 8-9. Simple Angular Material–styled alert box sample

 var aSimpleAlert = $mdDialog
     .alert()
     .title("Welcome")
     .textContent(" This is a simple alert message")
     .ok("Ahaa")
 ;

Use alert function on $mdDialog to create an alert instance. Set title and content of the alert using title and textContent functions, respectively. If an OK button needs to be shown, use the API/function ok to set text for the button.

 $mdDialog.show(aSimpleAlert);

$scope.showSimpleMessage = function(event){
    $mdDialog.show(aSimpleAlert);
    $timeout(function(){
        $scope.hideAlertMessage();
     }, 5000);
};

Confirm Dialog

Confirm allows the user to make a choice. It could be used for warning messages, which allow the user to make a final choice. See Figure 8-10.

Figure 8-10. Angular Material–styled confirm dialog

Consider the following code . Similar to alert, we create an object of the confirm dialog. We could reuse it across the controller (whichever is the scope of the object).

var aConfirmDialog = $mdDialog
.confirm()
.parent(angular.element(document.body))
.title("Confirm")
.textContent(" Are you sure to continue?")
.ok("Yes")
.cancel("No")
.openFrom("#left")                                                                      
;

Create a confirm dialog reference using confirm() function on $mdDialog service. Configure multiple aspects about the dialog.

1. Set parent using parent() API. The sample sets the whole body element in the HTML as the parent.

2. Similar to alert, set title and textContent on the confirm dialog.

3. Unlike alert dialog, confirm has two buttons: OK and Cancel. Set text on the button using ok() and cancel() API.

4. ariaLabel('a descriptive message'): Sets a string as a description for accessibility requirements. Screen reader/tools use this string.

5. Use openFrom(elementReference) to open the confirm dialog from given element in the template. The open animations zoom in from this element in the template. It could be placed on left or on right or at any corner of the page.

6. Use closeTo(elementReference) to close the confirm dialog to a given element in the template. The close animations zoom out to this element in the template. It could be placed on left or on right or at any corner of the page.

7. theme('themeName'): Provide a theme name as parameter to apply a custom theme while showing the dialog box.

8. htmlContent('<!-- Html template -->'): Unlike textContent API, we can provide HTML templates to this function. Note that ngSanitize module needs to be added as a dependency to use this function.

9. templateUrl('templates/yourTemplate.html'): Specify template file for the confirm dialog.

$mdDialog.show(aConfirmDialog).then(function(result){
    console.log(result + " - User selected yes"); // Success callback on OK click. Output will be "true - User selected yes”.              
}, function() {
    console.log("User selected no"); // Error callback on Cancel click              
});

$timeout(function(){
    $mdDialog.hide(aConfirmDialog);
}, 5000);                                                                               

Basic Customizations

We can customize and reuse a simple toast message. $mdToast exposes an API simple, which returns an object $mdToastPreset. This object stores the configured toast. We could reuse this toast message in the application.

Consider the following code. It creates $mdToastPreset object.

var toastRef = $mdToast
    .simple() // creates a toast message reference ($mdToastPreset)
    .textContent("Welcome to a reusable toast") // set text to be shown on the message.
    .capsule(true); // round edges

These functions are chained, which helps create the whole configuration with one line of JavaScript code. Notice the capsule API. It gives round edges to the toast. See Figure 8-12.

Figure 8-12. Toast message styled with round edges

Remember, this toast is not shown yet. Use the following line of code to show it on the screen.

$mdToast
    .show(toast)
    .then(function(){
        console.log("Done with the toast");
    });

Use show function for a preset toast. Similar to the showSimple function, show function too returns a promise, which is resolved as the toast is closed.

Advanced Customizations

Use build API/function to take advantage of advanced options with toast messaging. Similar to simple(), build() function also returns $mdToastPreset object. We could reuse the object across the controller (whichever is the scope of the object). Consider the following code.

 var toastPreset = $mdToast
       .build()
       .template("<md-toast> Advanced Toast</md-toast>")
       .position("top right")
       .hideDelay(10000);

 $mdToast.show(toastPreset);

Here, we are chaining the result to add additional configuration.

Unlike simple() API, build allows configuring a template (instead of just a text message). Use template function to provide HTML for the template. However, the md-toast element/directive is mandatory in the template.

Use templateUrl('url/to/the/template.html') to configure a template file.

$mdToast
   .build()
   .controller(function($scope){
           // Controller definition
    });

 var toastPreset = $mdToast
       .build()
       .template("<md-toast> <strong flex='85'> <sup>Highly </sup>advanced toast </strong> <md-button ng-click='closeToast()'>Close </md-button></md-toast>")
        .hideDelay(0)
        .controller(function($scope, $mdToast){
             $scope.closeToast = function(){
                 $mdToast.hide(toastPreset);                
             };
         });

$mdToast.show(toastPreset);

Position a Toast Message

Position()API allows configuring the position of the toast on the page. Possible values are top, left, right, bottom. We could use a combination of these values, that is, "top left", "bottom right", and so on. See Figure 8-14 for the toast positioned top-right.

Figure 8-14. Position a toast message

However, on a sm screen (small) it resets the position to bottom. This fits better with small screens. See Figure 8-15.

Figure 8-15. On a mobile view, toast positioned at the bottom

However, if you need to show it at a particular position on all screen sizes, use the following approach. Let that position be "top right" all the time or in the middle of the page, next to the element the user is interacting with.

Use parent() api/function and set a particular element on the HTML page as the parent for the toast. That enforces the toast shown at that element’s position all the time.

Consider the following sample. This shows toast in the div element, which is in the middle of a page, in the workspace.

<div id="advancedButton">                
  <md-button ng-click="showAdvCustomizedShow()">Advanced Toast</md-button>
 </div>

var toastPreset = $mdToast
         .build()
         .position("top right")
         .parent(angular.element(document.getElementById("advancedButton")))                
         .template("<md-toast> <strong> <sup>Highly </sup>advanced toast </strong></md-toast>")
         .hideDelay(0);

$mdToast.show(toastPreset);

The div element has an id "advancedButton". It is selected in the JavaScript code with document.getElementById() function . The selected element is passed as a parameter to parent() (for toast) function.

$mdToast.show({
    position: "top right",
    parent: angular.element(document.getElementById("advancedButton")),
    template: "<md-toast> <strong flex='85'><sup>Highly </sup>advanced toast </strong> <md-button ng-click='closeToast()'>Close </md-button></md-toast>",
    hideDelay: 0,
    locals: {
        dynamicValue: parentVal
    },
    controller: function($scope, $mdToast, dynamicValue){
        console.log(dynamicValue);
        $scope.closeToast = function(){
            $mdToast.hide(toastPreset);
        };
    }
});