2

I am working on an outlook web add-in (in Angular 5) and I am implementing a pinnable task pane and I've been following this documentation from Microsoft : Implement a pinnable task pane in Outlook.

What I want to do is when the selected mail in Outlook was changed, I need to update the content of my task pane UI.

On My Component.TS I added the following addHandlerSync event listener for change on mail selection:

ngOnInit() {
    Office.context.mailbox.addHandlerAsync(Office.EventType.ItemChanged, this.selectMailChanged);
}
selectMailChanged(){
    this.getPhoneNumbers() //This function gets phone numbers on the email
}

The error of the above code is

this.getPhoneNumbers is not defined.

I tried enclosing this this.getPhoneNumbers on zone (based on MS Documentation: Trigger the UI update) but it returns zone.run is not defined.

How can I call an angular component method on addHandlerAsync callback?

Outlook Add-ins Team - MSFT
  • 8,906
  • 1
  • 9
  • 21
johnie
  • 81
  • 5

1 Answers1

1

Good old famous this keyword problems.

You're getting that error message because of the context difference. When you're writing the code, the method selectMailChanged references the method getPhoneNumbers (which I'm hoping you have it implemented) in your component. So coding-wise it looks good.

But when the event kicks in - it doesn't have the context of the component anymore, because it's just calling a callback function - so it doesn't really have all the outside world information except the function that it's calling into. You can read a few good answers about this below:

  1. How to access the correct `this` inside a callback?
  2. https://thenewstack.io/mastering-javascript-callbacks-bind-apply-call/
  3. https://technology.amis.nl/2016/08/23/access-the-original-calling-context-in-a-callback-function-in-typescript/

Move the functionality in getPhoneNumbers to the callback method and you shouldn't have this problem.

Mavi Domates
  • 4,262
  • 2
  • 26
  • 45