CODEWITHSUNDEEP
angularjstypescriptangularjs-material
cracker
cracker

Reputation: 4906

Pass data from $mdDialog Child Component to Parent Component

I'm using one app controller to call one model window and I want to pass data from $mdDialog model window to app controller. How can I do that?

//parent Controller
class appCtrl implements IappSettings {
    public displayItems = [some array items];
    public sortingItems = [some array items];
    public backItems: string;
}

dopopup(event) {
    this.$mdDialog.show({                
        controller: appCtrl,
        controllerAs: '$ctrl',
        template: '<displayArrayCtrl on-save="$ctrl.onSave(displayColumns)"></displayArrayCtrl>'
    });
}

onSave(displayColumns) { //on button click on child controller
  this.backItems = displayColumns; //Using {{$ctrl.keyItems}} in app.html page but it's giving me empty string
}

//Child Controller
class displayArrayCtrl {
    saveData = function (selectedFields: any, sortSelectedFields: any) { //on button click on parent controller
        this.onSave({displayColumns: this.displayColumns}); //calling parent controller event
    }       
}

class displayArrayOptionsOptions implements ng.IComponentOptions {
    public controller: any;
    public templateUrl: string;
    public bindings: any;

    constructor() {
        this.controller = displayArrayCtrl;
        this.templateUrl = 'page.html';
        this.bindings = {
            onSave: '&',
            displayItems: '<',
            sortingItems: '<'
        };
    }

angular.module('app')
  .component('displayArrayCtrl', new displayArrayOptionsOptions());

It's calling my save event from child to parent controller but assigning the variable is not working properly.

Upvotes: 0

Views: 1975

Answers (2)

georgeawg
georgeawg

Reputation: 48968

A straight forward way to return values from a $mdDialog window is to use the promise that it returns:

var promise = $mdDialog.show({
     controller: function ($scope,$mdDialog) {
          $scope.save = function(x) {
              $mdDialog.hide(x);
          };
     }), 
     template: `
         <div>
             <input ng-model="reply" /><br>
             <button ng-click="save(reply)">Save</button>
        </div>
     `,
});

promise.then(function(reply) {
    console.log(reply);
});

For more information, see

Upvotes: 1

cracker
cracker

Reputation: 4906

I have found few ways to communicate between Parent to Child and Child to Parent, seems like :

$broadcast: Passing from Parent to Child $emit: Passing from Child to Parent.

Above will be useful if you are having same controller and different component while working with different component as well as controller won't update parent or child scope, results you are not able to show updated value.

The things which can help is the binding using controller which i have already used for communicate.

Workaround :

having pop up to show different component which any controller can consume :

this.$mdDialog.show({
  scope: this.$scope,
  preserveScope: true,
  bindToController: true,
  template: '<somecomponentname get-back-items="$ctrl.getBackItems"></somecomponentname>'
});

while somecomponentname component having :

constructor() {
  this.controller = someItemCtrl;
  this.templateUrl = 'scripts/somefolder/someitem.html';
  this.bindings = {               
    getBackItems: '='
  };
}

I have defined getBackItems on one more controller created within somecomponentname component like :

public getSelectedFields: any;

on Popup close assigning values to getBackItems and it will immediately reflect to parent controller as it's two way binding

Upvotes: 0

Related Questions