Self-contained Angular Material dialogs – Coding Outside the Box – Medium

  • Self-contained Angular Material dialogsAngular Material has great modal dialog functionality but the interface it provides is not super straight-forward.
  • Using ES6 syntax we can declare and control these dialogs in a cleaner fashion.To simulate input and output parameters we leverage mdDialog’s locals configuration property which let’s us inject values into the controller.
  • We take those values as an argument to our defining function:const dialogComponent = locals = ({ locals, // bound to the controller instance template:`pSomething: , bindToController: true, controllerAs: ‘$ctrl’, controller: function($mdDialog, myService) { // We can make use of this.foo and this.onSave … this.cancel = () = { $mdDialog.cancel() } }, clickOutsideToClose: true})Pay special attention to the outer-most brackets.
  • These effectively make dialogComponent() a factory function.
  • Now, this is how you would invoke that function from a parent foo: ‘bar’, // pass an input parameter onSave: () = { /* Handle saving on the parent */ }}))That’s all.

Angular Material has great modal dialog functionality but the API it provides is not super straight-forward. Specially if you are trying to follow a component-based design.

@ReactDOM: Self-contained Angular Material dialogs #es6 #javascript #webdevelopment #react #angularjs…

Angular Material has great modal dialog functionality but the interface it provides is not super straight-forward. Specially if you are trying to follow a component-based design. Using ES6 syntax we can declare and control these dialogs in a cleaner fashion.

To simulate input and output parameters we leverage mdDialog’s locals configuration property which let’s us inject values into the controller. We take those values as an argument to our defining function:

a factory function. Now, this is how you would invoke that function from a parent controller:

That’s all. Here’s a gist with a more complete example:

This post is based on the answer I gave to this Stack Overflow question. Tweet me at @coderdiego if you have any comments or suggestions!

Self-contained Angular Material dialogs – Coding Outside the Box – Medium

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.