Ion-item-sliding not working for list!

 <ion-list-header style="font-weight:bold; font-size:120%;">
    Courses
  </ion-list-header>
  
  <ion-item-sliding #slidingItem4>
  <ion-item *ngFor="let course of userCourse">
	
	{{ course?.CourseName }}
  
	<ion-icon name="book" item-right></ion-icon>
</ion-item>
<ion-item-options *ngIf="admin">
    <button ion-button (click)="edit4(slidingItem4, course)">Delete</button>
  </ion-item-options>
</ion-item-sliding>

Even if I do this :

  <ion-item-sliding *ngFor="let course of userCourse" #slidingItem4>

this second one give error: Uncaught Error: Template parse

and the first one , only slides the first item in the list, with no text in the slide button

1 Like
  <ion-list>
    <ion-list-header style="font-weight:bold; font-size:120%;">
      Courses
    </ion-list-header>

    <ion-item-sliding *ngFor="let course of userCourse">
      <ion-item>{{ course?.CourseName }}
        <ion-icon name="book" item-right></ion-icon>
      </ion-item>


      <ion-item-options side="right">
        <button ion-button (click)="edit4(course)">Delete</button>
      </ion-item-options>

    </ion-item-sliding>
  </ion-list>

try this…

see plnkr http://plnkr.co/edit/TnLGoaeFLYnaACgW1Ezx?p=preview

3 Likes

i’m try this: working not. why ?

Lista de itens
  <ion-item-sliding #item *ngFor="let item of this.itens"> 
  <ion-item class="itemOrcamento"> 
    <ion-avatar item-left>
      <img src="assets/img/23.png">
    </ion-avatar>

    <ion-row (click)="doModal()">

      <ion-col col-9 class="spanTexto texto-Left">{{ item.descricao }}</ion-col>
      <ion-col col-3 class="spanTexto texto-Right">{{ item.codigo }}</ion-col>

    </ion-row>

    <ion-row (click)="doModal()">

      <ion-col col-4 class="ion-col-style texto-Left">
        <img src="assets/img/dinheiro.png">
        <span class="precoReal">{{ item.precovenda }}</span>
        <span class="precoCentavo"></span>
      </ion-col>

      <ion-col col-4 class="ion-col-style texto-Left">
        <img src="assets/img/cartao.png">
        <span class="precoReal">{{ item.precoprazo }}</span>
        <span class="precoCentavo"></span>
      </ion-col>

      <ion-col col-4 class="ion-col-style-cr">
        <img src="assets/img/estoque.png">
        <span class="stockValue">{{ item.estoque }}</span>
      </ion-col>

    </ion-row>

  </ion-item>
  <ion-item-options side="right">
    <button ion-button (click)="unread(item)">Excluir</button>
  </ion-item-options>

  </ion-item-sliding>
<!-- <ion-row class="marginPx"></ion-row> -->

thx for “?” its work very well

The link was helpful!. I foolishly placed the outside of the . I could not figure out why my sliding action had no effect, until I tried your link.

The demo code in the documentation is generally very valuable.

You put course? - I don’t know what is this “?” for. It appears to me that with and without of it the result is the same.

I also tried
{{course.CourseName}}, none of the items would be displayed. Perhaps this is intended but I want to point this out. Another article indicated that it didnot work with ion-grid.

In ionic 3, It doesnt work
I tried like this, but doesnt works
Please check it anyone
<ion-list *ngSwitchCase="‘own’">
<ion-item-sliding class=“like-list bottomborder” *ngFor=“let item of onelist” no-margin >