Within my app component, I have implemented a table that triggers a modal to appear when a user clicks on any row. The modal displays details related to that specific row. The functionality is achieved through the following HTML code within the component containing the table.
<tr *ngFor="let myBug of myBugs" [attr.data-target]=" '#' + bugDetail.modalId" data-toggle="modal"
(click)="bugDetail.configureForm(myBug)">
<td>{{ myBug.title }}</td>
However, a drawback of this method is that the data is passed after the ngOnInit lifecycle hook completes. As a result, trying to access the value directly within myModal.component.html will lead to an error since it is initially undefined.
{{myBug.title}} // This is inside myModal.component.html
I acknowledge that I could handle the error by using the safe navigation operator. Nevertheless, I prefer not to take this route as I want the modal to populate with data from the selected table row.
{{myBug?.title}}
My attempt to address this issue involved adding the following code snippet inside my modal component.
@Input() bugInputTest
Subsequently, I made adjustments in the table's HTML code as shown below.
<tr
*ngFor="let myBug of myBugs"
[attr.data-target]=" '#' + bugDetail.modalId"
data-toggle="modal"
(click)="bugDetail.configureForm(myBug)">
<td>{{ myBug.title }}</td>
</tr>
<modal-approval-detail #bugDetail [bugInputTest]="myBug"></modal-approval-detail>
Furthermore, within the ngOnInit() method of my modal component, I added the following line of code.
console.log(this.bugInputTest)
My intention was to verify if the data was successfully passed. However, as expected, this did not work and resulted in 'undefined' being displayed in the console. It seems the issue stems from [bugInputTest]="myBug" as 'myBug' is not accessible outside the loop where the <tr> tags are present...
How can I effectively transmit data from my main component to the modal component in Angular2?