Angular: pass functions to service inside an object

Question

I have a component where i pass what i want to display inside a modal like this :

  openConfirmModal() {
    this.service.openmodal(
      {
        buttons: [ {name: 'Close'} ]
      }
    );
  }

The modal service is like this :

  openmodal(input: String) {
    const dialogRef = this.dialog.open(popupComponent, {
      data: new ModalConfirmData({
        buttons: Object.values(data)[0]
      })
    });
  }

Inside my popupComponent i have :

export class ModalPopupData {
  actions: Array<Object>;

  constructor(input?) {
    if (input) {
      this.buttons = input.buttons;
    }
  }
}

Now everything works fine with this, but what i want to do right now is to pass a function to my service in order for it to consume it. Something like this but i don't know how :

{
  function: (modalComponent) => {
    modalComponent.close();
  }
}

You can try removing async from the callback definition and handle the click event with: (click)="act.callback(this)". — Martin Parenteau
– Martin Parenteau, Commented Apr 21, 2019 at 2:30
Can you post the problem in stackblitz so we can solve it better? Because you can pass a function as a callback parameter without problem. — Daniel Piñeiro
– Daniel Piñeiro, Commented Apr 30, 2019 at 9:11

Krenom · Accepted Answer · 2019-04-22 09:06:30Z

5

Your callback is expecting to take in a modalComponent as a parameter, but your html is doing nothing of the sort at just (click)="act.callback".

In your current code, you're constructing a method that looks, essentially, like this:

var myCallback = function(modalComponent) {
  modalComponent.close();
}
// ...
var someObj = {
  name: "Close",
  callback: myCallback
}

And so calling it, something would eventually need to do:

// ...
var modalComp = getComponent(); // however it gets hold of a modalComponent
someObj.callback(modalComp);

The method needs to be given a modalComponent to work on, but when calling it, you are not giving it one - in your current code.

So, either your current calling of the callback needs to give the modal you want to close as the input (akin to the comment by @ConnorsFan, assuming this is the relevant reference to the modal), or you change your method to already know about the modal.

var myModal = ...;
var myObj = {
  name: "Close",
  callback: () => { myModal.close(); }
}

Now usage just looks like this, as there is no input params:

myObj.callback();

Anonymous functions are useful for cheekily making use of resources that don't really exist in the caller's scope.

answered Apr 22, 2019 at 9:06

Krenom

2,1282 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brxnzaz Over a year ago

but when i do so, i get an error that ERROR Error: Uncaught (in promise): TypeError: modalComponent.close is not a function

Krenom Over a year ago

Does your modal component expose a public close() method? How are you gaining that reference to the modalComponent?

Hien Nguyen · Accepted Answer · 2019-04-29 16:30:03Z

4

+25

Just like your buttons, you can pass your methods/callbacks to your service and then call them from within the service, e.g.

openConfirmModal() {
  this.service.openmodal({
    buttons: [ {name: 'Close'} ],
    methods: {
      onClose: () => {/** your function body goes here */},
      onSubmit: () => {/** your function body goes here*/}
      .
      .
      .
    }
  });
}

And then in your service, you can call them whenever you like.

Check this also click

edited Apr 29, 2019 at 16:30

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

answered Apr 26, 2019 at 5:06

Usman Saeed

2111 silver badge8 bronze badges

Comments

Daniel Piñeiro · Accepted Answer · 2019-04-30 09:18:59Z

2

You can use simple javascript/typescript to solve this, using just a callback method.

Your service function would be something like this:

serviceFunction(callback?) {
  const cb = callback || (() => { });
  // do your services thing
  return cb();
}

So when you call it you just call the serviceFunction with the callback function you want to use.

Considering that you have a this.close() method in your component, the call would look like:

myService.serviceFunction(this.close);

answered Apr 30, 2019 at 9:18

Daniel Piñeiro

3,1591 gold badge19 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angular: pass functions to service inside an object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related