Needing help with JIRA Issue Collector inside an angular application.

[Misty Ramsdell]

The button, to pull up the issue collector, needs to be clicked twice in order for the collector to pop up. 

running jQuery version 1.12.4 

Current code:

In html file:

<button id="nameOfButton" (click)="nameOfButton">Name of Button</button>

In ts file:

import * as jQuery from 'jquery';

declare global { 
   interface Window { 
     ALT_JQ_PAGE_PROPS: any; 
   } 
}

window.ALT_JQ_PAGE_PROPS = window.ALT_JQ_PAGE_PROPS || {};

@Component({ })

nameOfButton() {
    jQuery.ajax({url: 'https://url/plugins/servlet/issueCollectorBootstrap.js?collectorId=numberid&locale=en_US',
       type: 'get',
       cache: true,
       dataType: 'script',
     })

   window.ATL_JQ_PAGE_PROPS = {

      triggerFunction: function (showCollectorDialog: any) {

        //Requires that jQuery is available!

        jQuery('#nameOfButton').on('click', function (e) {

          e.preventDefault();

          showCollectorDialog();

          e.stopImmediatePropagation();     <- this is added by us to stop overlapping->

        });

      },

    };

  }

Is there a solution to fix the call to the issue collector and have it display without having to click the button a second time?

It would be nice if Atlassian would take a hard look into the JIRA Issue Collector and map out a solution for those who are using Angular for building their applications. 

If by chance we have missed the directions for Angular using a custom collector, please comment where to find them.