Angular 2: Saving variables in ngFor loop for use outside of loop

Question

I have a list of varieties generated by a for loop. Each item in that list has a button beside it so that particular list item can be deleted. Each button will open up a modal where you confirm whether or not you want to delete that variety. I don't want an unlimited amount of modals on the page, so I put the modal outside of the for loop and want to pass the id from the initial delete button to the modal so the modal knows which variety to delete. I figure in order to do that, I need to create a variable. I attempted this by putting #varietyToDelete="{{variety.PerProjectVarietyId}}" in the initial delete button, and then inside of the final delete button in the modal, I added this: (click)="removeVariety(#varietyToDelete)"

For a better look at my code, here is the relevant part of a for loop that I have:

<div *ngFor="let variety of varieties; let i=index">
    ...
    <div class="varietyName">            
            <a href="#deleteVarietySelling" #varietyToDelete="{{variety.PerProjectVarietyId}}" data-toggle="modal">
                <i class="fa fa-minus"></i>
            </a>
        </div>
    </div>
</div>

And here is my modal, where I want to pass that variable to:

<div class="modal fade alert" id="deleteVarietySelling" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <a href="#" class="close-modal" data-dismiss="modal">&times;</a>
                <p class="confirmation-message">
                    Are you sure you want to delete this variety?
                </p>
                <div class="row">
                    <div class="removeCancel">
                        <a href="#" class="cancel-button" data-dismiss="modal">Cancel</a>
                        <a href="#" class="remove-button" (click)="removeVariety(#varietyToDelete)">Remove</a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

When I try this, I get the following error:

There is no directive with "exportAs" set to "{{variety.PerProjectVarietyId}}"

Is there a way to get what I'm trying to do to work? Is my syntax off, or do I need to take a different approach entirely?

Answer 1

You can use ViewChild in your component to read your modal in component:

import { ViewChild } from '@angular/core';

@ViewChild('myModal')
myModal: any;

Your modal should look like this:

<div bsModal #myModal="bs-modal" class="modal fade alert" id="deleteVarietySelling" tabindex="-1">
    ...
</div>

Then, in your component, you can create a method that is going to display modal on click and pass the value you clicked on so you can store it in variable and then pass that variable to removeVariety():

varietyToRemove: any;

public showModal(variety: any): void {
    this.childModal.show();
    this.varietyToRemove = variety;
}

You then use showModal(variety: any) to display modal on click event in your for loop: (not sure you can add click event to a tag, you may have to change it to button or something)

<a href="#deleteVarietySelling" (click)="showModal(variety)">
    <i class="fa fa-minus"></i>
</a>

And finally, you just call removeVariety(varietyToRemove) on your remove button's click event:

<a href="#" class="remove-button" (click)="removeVariety(varietyToRemove)">Remove</a>