Ionic 4 - Button inside sliding item wich is no item-option and clickable itself?

Ionic Framework
1

Hello,

does someone know a sulution for that code problem?
Try to use a button inside an ion-item -sliding, wich itself is a button and that button is not inside item-options.

<ion-button color="none" size="small" fill="clear" (click)="delete = !delete" >
          <ion-icon slot="icon-only" name="create" color="dark" *ngIf="!delete"></ion-icon>
          <ion-label *ngIf="delete" color="primary">done</ion-label>
        </ion-button>

<ion-list>

<ion-item-sliding [routerLink]="['/customer-Item', Item.Guid]" //tried as button and routerlink.
        *ngFor="let items of $items_filtered | async"> //for observable searchbar.

        <ion-item [button]="!delete">
          <ion-ripple-effect></ion-ripple-effect>

          <ion-label text-wrap>
            <h2>{{Item.name}}</h2>
            <p>{{Item.description}} | {{Item.number}}</p>
          </ion-label>

          <ion-button color="none" *ngIf="delete" slot="start" fill="clear" class="ibutton" (click)="delWarn(ev)"> // delWarn() is an  alert
            <ion-icon slot="icon-only" name="remove-circle" color="danger" size="large"></ion-icon>
          </ion-button>
        </ion-item>

        <ion-item-options>
          <ion-item-option *ngIf="!delete">Duplicate</ion-item-option>
        </ion-item-options>

      </ion-item-sliding>

  </ion-list>

should kinda look like iOS, but ion-button and the routerlink trigger at the same time.

Some suggestions?

2

Just as you have the code you can never perform the button action, since you have the router Link in the parent.

Try this.

<ion-button color="none" size="small" fill="clear" (click)="delete = !delete" >
          <ion-icon slot="icon-only" name="create" color="dark" *ngIf="!delete"></ion-icon>
          <ion-label *ngIf="delete" color="primary">done</ion-label>
        </ion-button>

<ion-list>
<ion-item-sliding  *ngFor="let items of $items_filtered | async"> //remove RouterLink from here.
        <ion-item [button]="!delete">
          <ion-ripple-effect></ion-ripple-effect>

          <ion-label text-wrap [routerLink]="['/customer-Item', Item.Guid]"> //move RouterLink to here.
            <h2>{{Item.name}}</h2>
            <p>{{Item.description}} | {{Item.number}}</p>
          </ion-label>

          <ion-button color="none" *ngIf="delete" slot="start" fill="clear" class="ibutton" (click)="delWarn(ev)"> // delWarn() is an  alert.
          //**ev**  on delWarn() is a EVENT? or variable? check this beacause i dont see declaration to it.
            <ion-icon slot="icon-only" name="remove-circle" color="danger" size="large"></ion-icon>
          </ion-button>
        </ion-item>

        <ion-item-options>
          <ion-item-option *ngIf="!delete">Duplicate</ion-item-option>
        </ion-item-options>

      </ion-item-sliding>

  </ion-list>

This work for me.

Good luck…

3

I knew that was wrong there, but I tried every position, except the label.
I will try it tomorrow an if it works, thanks!

How could I miss that one xDD

4

Ready, do not forget to mark as solved

5

tested it and workes fine, thanks!

1 Like