How to handle dialogs in an architecture based on Angular components

Question

I am working on an application in Angular 1.5. I adhere to the component-based architecture ( https://docs.angularjs.org/guide/component ) and the input / output stream described there.

So far, it worked fine, but now I need to open the child component as a dialog box, and I'm stuck.

The architecture is beautiful when rendering a component tree, starting with the main component. But I have no idea how to get one of these children and display it as a dialog, and still use the recommended input / output stream.

Do you know any template / library for this?

Answer 1

There will be angular material in the library:

https://material.angularjs.org/latest/demo/dialog

The sample should be something like this:

// my-dialog.js 'use es6' export default locals => ({ locals, // will be bound to the controller instance! template: ` <p>Something: <span>{{$ctrl.foo}}</span></p> <md-button ng-click="$ctrl.onSave()">Save</md-button> <md-button ng-click="$ctrl.cancel()">Cancel</md-button> ` , bindToController: true, controllerAs: '$ctrl', controller: function($mdDialog, myService) { // this.foo = ..will be provided in locals as an input parameter.. // this.onSave = () { ..will be provided as output parameter.. } this.cancel = () => { $mdDialog.cancel() } }, clickOutsideToClose: true }) 

Why will you refer to the parent component as follows:

 // main-component.js 'use es6' import myDialog from './my-dialog' .. $mdDialog.show(myDialog({ foo: 'bar', onSave: () => { .. } })) 

Hope this helps!