Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 2

Ion-item-sliding with ion-input, can’t delete the item

Solved! Go to Solution.

In a form I want to delete " item line" with ion-item-sliding. If I don't use ion-item-sliding, I can delete the item line correctly, the form works correctly. When I use the ion-item-sliding, the delete button doesn't work any more. I think because of the ion-input. It looks the ion-input get over the ion-item-option so the click doesn't work.

 

Let me show you like this you will understand: 

ionSliding.JPG

 

There is the template code

 

<!-- Show and write Quantity -->
<div formArrayName="quantity">
    <ion-item-sliding *ngFor="let quantityCtrl of itemsCtrl.get('quantity').controls; let qtyIndex = index">
        <ion-item>
            <ion-input type="text" placeholder="Add a quantity ..." [formControlName]="qtyIndex"></ion-input>

            <!-- QUANTITY remove Button -->
            <ion-item-options side="start">
                <ion-item-option color="danger" expandable (click)="removeItem(itemsCtrl, qtyIndex)">
                    <ion-icon slot="icon-only" name="remove-circle-outline"></ion-icon>
                </ion-item-option>
            </ion-item-options>
        </ion-item>
        <br>
    </ion-item-sliding>

Thanks very much for help

1 Reply
Highlighted
Solution
Copilot Lvl 2
Message 2 of 2

Re: Ion-item-sliding with ion-input, can’t delete the item

the answer is :

the

<ion-item-options>

have to be outside  of

<ion-item>

 :)