Angular: property in controller is undefined

Issue

I have a small controller that binds a model to a UI and handles the UI popup with semantic (tells semantic when to show / hide the popup).

export class MyController implements IController {
popup: any | undefined

onShow(context: any) {
    this.popup = $(context)
    console.log('this.popup', this.popup)
}

onHide() {
    this.popup?.popup('hide')
}
}

When I show the semantic popup, it works and the reference is stored in this.popup. I can see in the console.log(), that this.popup now stores the reference to the popup for later use. Once I click on the button to close the popup onHide() gets called but this.popup is now undefined. I have checked with breakpoints if a constructor gets called or any of the onChanges, onDestroy lifecycle hooks form Angular get called, but nothing. Why is this.popup undefined, when it was clearly set before?

EDIT: As requested, some more information: We use semantic UI, this is the button that opens the popup, triggering vm.onShow(). This means that "context" from the controller above is the button the click was triggered on.

<button class="ui icon basic button" ng-class="{ yellow: !vm.model.allActive }"
    ng-click="vm.model.open(attribute.value)"
    jq-init-popup-fixed="{ inline: true, position: vm.model.position, on: 'click', onVisible: vm.onShow }">
<i class="icon semantic-icon filter" style="padding-left: 1px;"></i>

This is the button the popup is closed on, it triggers onHide() and should tell semantic to close the popup, if the controller wouldn't loose the reference.

<div class="ui actions right floated button" ng-click="vm.model.close(); vm.onHide()">
            <span translate="POPUP_BTN_OK"></span>
        </div>

Solution

I figured it out finally. The way onShow() is passed in above is different from the way onHide() is called, thus creating a different this context which leads to this.popup not existing.

Answered By - Shiuyin