How to change Modal title with Angular

Question

I have a span that populates a list of items followed by commas. I want a modal to show the item name when it is clicked. My current code is as below:

<span class="text-success"*ngFor="let item of items; let isLast=last" 
data-toggle="modal" data-target="#myModal">
{{item}}{{isLast ? '' : ', '}}                  
</span>
... <!-- other line of html here -->

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">This is Item: {{item}} Test</h4>
</div>
<div class="modal-body">
<p>Success: 12</p>
<p>Failed: 5</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- 
dismiss="modal">Close</button>
</div>
</div>
</div>

I want the {{item}} in the modal title to be the name of the item that is clicked. Does anyone know what I am doing wrong please?

Answer 1

You can't use {{ item }} outside of your *ngFor. Use another variable instead to store the value of selected item. And then show that in your Modal. Something like this:

<span class="text-success"*ngFor="let item of items; let isLast=last" 
data-toggle="modal" data-target="#myModal">
<span (click)="selectedItem = item"> {{item}}{{isLast ? '' : ', '}} </span>                  
</span>
... <!-- other line of html here -->

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">This is Item: {{selectedItem }} Test</h4>
</div>
<div class="modal-body">
<p>Success: 12</p>
<p>Failed: 5</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- 
dismiss="modal">Close</button>
</div>
</div>
</div>