title: ionic 2 show-delete in ion-list predecated
body: <p>I am developing a mobile app using ionic 2 with Angular 2. </p>
  
  <p>I have an ion-list filled ion-items. I want those ion-item to have the ability to be deleted if needed as presented <a href="http://ionicframework.com/docs/api/directive/ionList/" rel="nofollow">here</a> on the ionic website.</p>
  
  <p>However a lot have changed in <strong>ionic 2</strong> since the first version and the above style of one button opening all the <strong>ion-item</strong> at one is not possible anymore since the <strong>show-delete</strong> and <strong>show-reorder</strong> are no longer supported. The only option available is to have <strong>ion-item-sliding</strong> as ion-item, which gives us the ability to slide each item one at a time in order to reveal the delete button.</p>
  
  <p>That is not what I wanted. I wanted one button that open all ion-item at the same time.</p>
  
  <p>After spending some time on that, I came up with a working solution and managed to achieve the desired outcome using ionic 2, and I am going to share it with you.</p>
  
  <p>Here is my solution: </p>
  
  <p>In the .html file:</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-buttons start (click)="manageSlide()"&gt;
        &lt;button&gt;
          &lt;ion-icon name="ios-remove"&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;
      &lt;/ion-buttons&gt;
      &lt;ion-title&gt;PageName&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  </code></pre>
  
  <p>and for the list:</p>
  
  <pre><code>&lt;ion-list #list1&gt;
    &lt;ion-item-sliding #slidingItem *ngFor="let contact of contacts | sortOrder"&gt;
      &lt;button #item ion-item&gt;
        &lt;p&gt;{{ item.details }}&lt;/p&gt;
        &lt;ion-icon id="listIcon" name="arrow-forward" item-right&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
      &lt;ion-item-options side="left"&gt;
        &lt;button danger (click)="doConfirm(contact, slidingItem)"&gt;
          &lt;ion-icon name="ios-remove-circle-outline"&gt;&lt;/ion-icon&gt;
        Remove
        &lt;/button&gt;
      &lt;/ion-item-options&gt;
    &lt;/ion-item-sliding&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>In the <strong>.ts</strong> file, first do your imports:</p>
  
  <pre><code>import { ViewChild } from '@angular/core';
  import { Item } from 'ionic-angular';
  import { ItemSliding, List } from 'ionic-angular';
  </code></pre>
  
  <p>then refer to the html element by declaring a ViewChild:</p>
  
  <pre><code>@ViewChild(List) list: List;
  </code></pre>
  
  <p>Finally add your classes to handle the work:</p>
  
  <pre><code>public manageSlide() {
  
      //loop through the list by the number retreived of the number of ion-item-sliding in the list
      for (let i = 0; i &lt; this.list.getElementRef().nativeElement.children.length; i++) {
  
          // retreive the current ion-item-sliding
          let itemSlide = this.list.getElementRef().nativeElement.children[i].$ionComponent;
  
          // retreive the button to slide within the ion-item-sliding
          let item = itemSlide.item;
  
          // retreive the icon
          let ic = item._elementRef.nativeElement.children[0].children[1];
  
          if (this.deleteOpened) {
              this.closeSlide(itemSlide);
          } else {
              this.openSlide(itemSlide, item, ic);
          } 
      }
  
      if (this.deleteOpened) {
          this.deleteOpened = false;
      } else {
          this.deleteOpened = true;
      } 
  }
  </code></pre>
  
  <p>Then the opening class:</p>
  
  <pre><code>private openSlide(itemSlide: ItemSliding, item: Item, inIcon) {
    itemSlide.setCssClass("active-sliding", true);
    itemSlide.setCssClass("active-slide", true);
    itemSlide.setCssClass("active-options-left", true);
    item.setCssStyle("transform", "translate3d(72px, 0px, 0px)")
  }
  </code></pre>
  
  <p>And the closing class:</p>
  
  <pre><code>private closeSlide(itemSlide: ItemSliding) {
    itemSlide.close();
    itemSlide.setCssClass("active-sliding", false);
    itemSlide.setCssClass("active-slide", false);
    itemSlide.setCssClass("active-options-left", false);
  </code></pre>
  
  <p>}</p>
  
  <p>I hope it will help some you out there.</p>
  
  <p>Enjoy and good coding...</p>