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);
});
}
}
}