title: Ways to integrate the Jira issue collector with an Angular app?
body: <p>I'm looking to create an Angular 7 app that utilizes the Jira issue collector to submit issues directly to their respective projects.</p>
  <p>When I build the app the way it is now, nothing happens. When I move the code from method &quot;submitIssue&quot; to under &quot;ngOnInIt&quot; directly the issue collector dialogue comes up. Where should the code snippet be added?</p>
  <p>Any assistance would be greatly appreciated. Thank you!</p>
  <h3>Jira Code Snippet Example</h3>
  <pre><code>// Requires jQuery!
  jQuery.ajax({
      url: &quot;https://&lt;domain&gt;.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com&quot;,
      type: &quot;get&quot;,
      cache: true,
      dataType: &quot;script&quot;
  });
  
   window.ATL_JQ_PAGE_PROPS =  {
      &quot;triggerFunction&quot;: function(showCollectorDialog) {
          //Requires that jQuery is available! 
          jQuery(&quot;#myCustomTrigger&quot;).click(function(e) {
              e.preventDefault();
              showCollectorDialog();
          });
      }};
  
  </code></pre>
  <p>This is my array that populates the cards with different projects and buttons on my issue collector component.</p>
  <h3>db-data.ts</h3>
  <pre><code>export const PROJECTS: any = [
  
      {
          id: 1,
          title: 'Project Title',
          /** The url is taken directly from the issue collector section within the Jira project. Link below is modified
           * for security purposes. */
          url: 'https://&lt;domain&gt;.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com'
      },
      {
          id: 2,
          title: 'Project Title',
          /** The url is taken directly from the issue collector section within the Jira project. Link below is modified
           * for security purposes. */
          url: 'https://&lt;domain&gt;.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com'
      },
  
  ];
  
  
  export function findCourseById(projectId:number) {
      return PROJECTS.find(project =&gt; project.id === projectId);
  
  
  }
  </code></pre>
  <h3>jira-card.component.ts</h3>
  <pre><code>import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
  import { Project } from 'src/app/model/project';
  import { PROJECTS } from 'src/db-data';
  import { projection } from '@angular/core/src/render3';
  import * as $ from 'jquery';
  
  declare global {
    interface Window { ATL_JQ_PAGE_PROPS: any; }
  }
  
  window.ATL_JQ_PAGE_PROPS = window.ATL_JQ_PAGE_PROPS || {};
  
  @Component({
    selector: 'app-jira-card',
    templateUrl: './jira-card.component.html',
    styleUrls: ['./jira-card.component.scss']
  })
  
  export class JiraCardComponent implements OnInit {
  
    @Input()
    project: Project;
  
    constructor() { }
  
     ngOnInit() {}
  
     submitIssue() {
  
              // Requires jQuery!
              jQuery.ajax({
                url: this.project.url,
                type: 'get',
                cache: true,
                dataType: 'script'
              });
      
          window.ATL_JQ_PAGE_PROPS =  {
          &quot;triggerFunction&quot;: function(showCollectorDialog) {
            jQuery(&quot;#submit&quot;).on('click', function(e) {
              e.preventDefault();
              showCollectorDialog();
            });
          }};
         }
     }
  
  
  </code></pre>
  <h3>jira-card.component.html</h3>
  <pre><code>&lt;div class=&quot;main-div&quot;&gt;
    &lt;mat-card class=&quot;jira-card&quot;&gt;
        &lt;mat-card-header&gt;
          &lt;mat-card-title&gt;{{ project.title }}&lt;/mat-card-title&gt;
          &lt;mat-card-subtitle&gt;&lt;/mat-card-subtitle&gt;
        &lt;/mat-card-header&gt;
        &lt;mat-card-actions&gt;
          &lt;button mat-raised-button id (click)=&quot;submitIssue()&quot; id=&quot;#submit&quot;&gt;Submit Issue&lt;/button&gt;
        &lt;/mat-card-actions&gt;
      &lt;/mat-card&gt;
  &lt;/div&gt;    
  
  </code></pre>