Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to extend/overwrite default options in Angular Material $mdDialog.show?

TL;DR : I need a way to overwrite default options provided my Angular Material (especially on Material Dialog) using providers (like any other angular modules - a random example).

I have been looking for a way to customize defaults options Angular Material Modal but without any usable result.

Like I have used on other plugins/modules this way could be achieved using a provider. Having a look in the core of the material (1.0.8) I was trying to set options using setDefaults method like this (let say I just want to disable backdrop for moment):

app.config(['$mdDialogProvider', function($mdDialogProvider){
    console.log($mdDialogProvider); 
    // ^ $get/addMethod/addPreset/setDefaults

    var defaults = {
        options: function(){
            return {
                hasBackdrop: false
            }
        }
    }
    $mdDialogProvider.setDefaults(defaults);
}]);

Right now when I am checking the options on onComplete callback :

enter image description here

So as you can see the hasBackdrop option is updated, but the modal is not working anymore so I think I am missing something.

Do you have any idea how the angular defaults could be extended in a proper way?

Thanks

UPDATE : Options object without having .setDefaults active (de initial state)

enter image description here

Note : I have copied from their core transformTemplate and added in my defaults object, but the result is the same. I can see the DOM updated, console has no errors, but the modal is not visible.

like image 686
stefanz Avatar asked May 20 '16 12:05

stefanz


People also ask

What is MatDialog used for in angular material?

The MatDialog service can be used to open modal dialogs with Material Design styling and animations.

How do you use MatDialogRef?

In the dialog component, we need to create an instance of 'MatDialogRef' which we should import from '@angular/material/dialog'. Import 'MatDialogModule' from '@angular/material' in app. module. ts file.

What is $mdDialog?

$mdDialog opens a dialog over the app to inform users about critical information or require them to make decisions. There are two approaches for setup: a simple promise API and regular object syntax.


1 Answers

When you want to update an existing functionality from a third party library, you should try to use decorator pattern and decorate the service method.

Angular provides a neat way of doing this using decorators on providers while configuring the app: https://docs.angularjs.org/api/auto/service/$provide

$provide.decorator

$provide.decorator(name, decorator);

Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behavior of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.

You can write a decorator for $mdDialogProvider to extend the functionality of the .show method and pass it the extended options object like shown below:

.config(function ($provide) {
  // Decorate the $mdDialog service using $provide.decorator
  $provide.decorator("$mdDialog", function ($delegate) {
    // Get a handle of the show method
    var methodHandle = $delegate.show;

    function decorateDialogShow () {
      var args = angular.extend({}, arguments[0], { hasBackdrop: false })
      return methodHandle(args);
    }

    $delegate.show = decorateDialogShow; 
    return $delegate;
  });
});

I have created a codepen with a working example with { hasBackdrop: false } so that backdrop is not shown on calling $mdDialog.show(): http://codepen.io/addi90/pen/RaXqRx

like image 162
Aditya Singh Avatar answered Oct 18 '22 05:10

Aditya Singh