My issue is with using ngFor to generate and display data within a modal form. When clicking on any element, only the data of the first element on the page appears in the modal form. How can I make it so that the data changes for each element clicked? Here is my code:
<form target="_blank" novalidate="true" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&id=92a4423d01" method="get" class="form-inline">
<div class="d-flex flex-row">
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel3">Unit Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="col-lg-12">
<br>
<p>Project : {{prop.project}} <br>
Unit Name : {{prop.unit_name}} <br>
Unit Usage : {{prop.unit_usage}} <br>
Country : {{prop.country}} <br>
Unit for : {{prop.unit_for}} <br>
Finishing : {{prop.finishing}} <br>
Property type : {{prop.property_type}} <br>
City : {{prop.city}} <br>
District: {{prop.district}} <br>
Min. Area: {{prop.min_area}} <br>
Starting Price: {{prop.starting_price}}<br> <br>
<img style="height: 150px; width: 250px;" src= {{prop.img}}>
</p>
<div class="alert-msg">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; left: -5000px;">
<input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text">
</div>
</div>
<div class="info"></div>
</form>
</div>
<div class="images">
<img style="height: 250px; width: 350px;" class="content-image img-fluid d-block mx-auto" src= {{prop.img}} alt="" data-toggle="modal" data-target="#exampleModal3">
<span style="margin-top: 0px; color:black;background-color: rgba(255,255,255,0.3);"><br>{{prop.property_type}} <br><br><br> {{prop.developer}} <br><br><br> {{prop.district}} <br></span>
</div>
</div>
</div>