Why is my Jira Issue Collector integration with Angular not working?

Question

I want to integrate the jira issue collector with an angular app

I have tried something like

Component.ts

import { Component, OnInit } from '@angular/core';
import * as jQuery from 'jquery';

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

window.ATL_JQ_PAGE_PROPS = window.ATL_JQ_PAGE_PROPS || {};

@Component({
  selector: 'cmdb-jira-issue-collector',
  templateUrl: './jira-issue-collector.component.html',
  styleUrls: ['./jira-issue-collector.component.scss']
})
export class JiraIssueCollectorComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  submitIssue() {

    console.log('submitIssue');

    jQuery.ajax({
      url: "my-url",
      type: 'get',
      cache: true,
      dataType: 'script'
    });

    window.ATL_JQ_PAGE_PROPS =  {
      "triggerFunction": function(showCollectorDialog) {
        showCollectorDialog();
      }
    };

  }

}

Component.html

<p>jira-issue-collector works!</p>
<button id (click)="submitIssue()" id="submit">Submit Issue</button>

However this doesnt work.

Also tried injecting the script directly inside index.html as stated in Ways to integrate the Jira issue collector with an Angular app? but i get error that window.showCollectorDialog is not a function and ReferenceError: jQuery is not defined.

I am confused . What am i missing ?

Answer 1

So apparently I missed the step that we also need to set the custom trigger on in the jira issue tracker settings as mentioned https://support.atlassian.com/jira-cloud-administration/docs/customize-the-jira-issue-collector/ . I somehow missed this step which took me a few hours to find out. Now everything works :-)