I'm a beginner in Angular and I have a question that might seem basic, but I couldn't find the solution anywhere. Here it is:
When retrieving data from an API with multiple projects, I want to display information about each project on a dashboard. Additionally, I need to have a button for each project that, when clicked, will display that project's URLs.
Currently, I am using ngFor in the HTML to loop through and display the project information effectively. However, I'm facing challenges implementing the modal functionality. I want to load custom data (from the ngFor) into the modal.
The problem lies in the fact that the modal template is placed at the bottom of the HTML, causing the original ngFor data to be inaccessible when trying to populate the modal.
So far, the only progress I've made is assigning an ID to the button. But how do I use this ID to fetch data 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"&bt;×</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 have not been able to figure out how to include the modal template inside the ngFor loop to make the data accessible. I understand that I need to work with the content variable, but how and where should I define it to pass it to the modal?