Getting custom data in angular modal from ngFor

Question

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:

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.

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

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.

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?

HTML:

<div *ngFor="let project of projectData; index as i">
  <button
    type="submit"
    id="myModal"
    style="background-color: #f27704; padding: 0px"
    class="btn btn-sm ModalLaunch"
    data-id="{{ project.id }}"
    (click)="open(content)"
  >
    Launch modal
  </button>

  <!-- some other repeatable HTML here -->
</div>

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">URLs</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <!--        {{project.urls}}-->
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Close</button>
    </div>
  </div>
</ng-template>

This is the open function in the app.component.ts file

open(content) {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
      result => {
        this.closeResult = `Closed with: ${result}`;
      },
      reason => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      }
    );
  }

I could not find a way to place the modal template inside the ngFor , 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?

Answer 1

you need to set the data attribute when you open the dialog

  /**
   *
   */
  opendialog(): void {
    const dialogRef = this.dialog.open(YourComponent, {
      width: '100%',
      // height: '1800',
      data: datatopass,
    });

you then need to see that data in your component pick this up in the contructor

 constructor(
    @Optional() public dialogRef: MatDialogRef<TickertagsComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: typeofdatayoupassed,
    
  ) {}

you can then read the value from the data property

EDit: sorry this is for angular material library, find here https://material.angular.io/components/dialog/overview

Answer 2

So, this is working now. I had to get the element ID from the button with a JS function, then pass it to another function that searches the API JSON for that element ID and then return the data with innerHTML. Thanks everyone who read and commented on my post!