Ion-item sliding not working


#1

I am adding sliding to my list,on silding right I have a call button,
but the sliding does not work and no button is visible,because of no sliding…Please help me where I am wrong…
I want to add call button on my contact list,on right slide of the items…

This is my html code…

 <ion-item-group *ngFor="let group of groupedContacts">
    <ion-item-divider color="light">{{group.letter}}</ion-item-divider>   

        <ion-item-sliding  *ngFor="let contact of group.contacts" class="contactlist" >
       <ion-item>
       {{contact.name}}
             <p>{{contact.number}}</p>
           </ion-item>
           <ion-item-options side="right">
    <button ion-button color="secondary" *ngIf="contact.phoneNumbers"
        (click)="callContact(contact.phoneNumbers[0].value)">
      <ion-icon name="call"> Call</ion-icon>
    </button>
  </ion-item-options>
        </ion-item-sliding>
  </ion-item-group>
</ion-list>

my typescript code:-

import { Component } from '@angular/core';
import { NavController,Platform ,PopoverController,ViewController} from 'ionic-angular';
import { Contacts } from '@ionic-native/contacts';
import {SMS} from '@ionic-native/sms';
import{CallNumber}from'@ionic-native/call-number';
import{SmsPage}from'../sms/sms';
@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
 contacts = []
 groupedContacts = []



  constructor(public navCtrl: NavController,public co:Contacts,public viewCtrl:ViewController,public popoverCtrl:PopoverController,
  public callNumber:CallNumber,public sms:SMS) {

    this.initializeItems();

    co.find(["displayName", "phoneNumbers"], {multiple: true, hasPhoneNumber: true}).then((contacts) => {

    for (var i=0 ; i < contacts.length; i++){
     if(contacts[i].displayName !== null){
       var obj = {};
       obj["name"] = contacts[i].displayName;
       obj["number"] = contacts[i].phoneNumbers[0].value;
       this.contacts.push(obj)   

     }      
    }

    this.groupContacts(this.contacts);

  })
}

 callContact(number: string) {
    this.callNumber.callNumber(number, true)
      .then(() => console.log('Dialer Launched!'))
      .catch(() => console.log('Error launching dialer'));
}

groupContacts(contacts){

  let sortedContacts = contacts.sort(function(a, b){
    if(a.name < b.name) return -1;
    if(a.name > b.name) return 1;
    return 0;
   });

  let currentLetter = false;
  let currentContacts = [];

  sortedContacts.forEach((value, index) => {
    if(value.name.charAt(0) != currentLetter){
      currentLetter = value.name.charAt(0);

      let newGroup ={
        letter: currentLetter,
        contacts:[]
      };

      currentContacts = newGroup.contacts;
      this.groupedContacts.push(newGroup);
    }
    currentContacts.push(value);
  });
}
	
}

}