<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>

<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>