title: Getting custom data in angular modal from ngFor
body: <p>I am new to Angular. And I am sure this is a noob question, but I couldn't find the answer anywhere so here it goes:</p>
  <p>From an API, I get some data with multiple projects. I have to display info about those projects in a dashboard. But I also have a button for each project, that when pressed, has to display that project's URLs.</p>
  <p>In the HTML, I am doing an ngFor which works perfectly for serving the html template for the other info. But I can't get it to work for the modal. I want to load custom data (from that ngFor) into the modal</p>
  <p>The issue is that the modal template sits at the very bottom of the HTML, so the data from the original ngFor is not available anymore.</p>
  <p>All I have managed to do is get the button to have an ID. But how do I use that ID to get info back from the API?</p>
  <p>HTML:</p>
  <pre><code>&lt;div *ngFor=&quot;let project of projectData; index as i&quot;&gt;
    &lt;button
      type=&quot;submit&quot;
      id=&quot;myModal&quot;
      style=&quot;background-color: #f27704; padding: 0px&quot;
      class=&quot;btn btn-sm ModalLaunch&quot;
      data-id=&quot;{{ project.id }}&quot;
      (click)=&quot;open(content)&quot;
    &gt;
      Launch modal
    &lt;/button&gt;
  
    &lt;!-- some other repeatable HTML here --&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>&lt;ng-template #content let-modal&gt;
    &lt;div class=&quot;modal-header&quot;&gt;
      &lt;h4 class=&quot;modal-title&quot; id=&quot;modal-basic-title&quot;&gt;URLs&lt;/h4&gt;
      &lt;button type=&quot;button&quot; class=&quot;close&quot; aria-label=&quot;Close&quot; (click)=&quot;modal.dismiss('Cross click')&quot;&gt;
        &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal-body&quot;&gt;
      &lt;!--        {{project.urls}}--&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-dark&quot; (click)=&quot;modal.close('Close click')&quot;&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  <p>This is the open function in the app.component.ts file</p>
  <pre><code>open(content) {
      this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
        result =&gt; {
          this.closeResult = `Closed with: ${result}`;
        },
        reason =&gt; {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
    }
  </code></pre>
  <p>I could not find a way to place the modal template inside the <code>ngFor</code>, for the data to be available. I know I should do something with the content, but where do I define that and how do I serve it to the modal?</p>