I want to retrieve all the contacts in the phone. I am using cordova-plugin-contacts in ionic 2 project.
My TrmAgentReport.ts file contains the following code:
export class TrmAgentReport {
dateofIssue: any = new Date().toISOString();
public contactsList: Array<any>=[];
public search: boolean = false;
// constructor
constructor(public platform: Platform, public trmNavCtrl: NavController, public trmAlertCtrl: AlertController, public trmProvider: TrmDBProvider, public trmZone: NgZone, public trmMenuCtrl: MenuController)
{
this.trmMenuCtrl = trmMenuCtrl;
this.trmMenuCtrl.enable(false, 'ownerMenu');
this.trmMenuCtrl.enable(true, 'agentMenu');
this.trmMenuCtrl.enable(false, 'customerMenu');
this.contactsList = [];
this.search = false;
}
// method to show the alert message
showAlert(msg: number)
{
var now = moment(this.dateofIssue).add(1, "d").format("DD-MM-YYYY");
let alert = this.trmAlertCtrl.create({
title: "Interest Rate",
subTitle: msg.toString(),
message: "time" + now,
buttons: ["OK"]
});
alert.present();
}
contactDetails()
{
this.showAlert(99);
this.search = true;
this.platform.ready().then(() => {
var opts = {
filter : "M",
multiple: true,
hasPhoneNumber:true,
fields: ['displayName', 'name']
};
Contacts.find(['displayName', 'name'], opts).then((contacts) => {
this.contactsList = contacts;
this.search = true;
}, (error) => {
console.log(error);
});
});
}
}
TrmAgentReport.html code is as follows:
Agent Pages
<!--Input box to read the loan amount from the user -->
<ion-item>
<ion-label color ="secondary">Welcome to agent page.</ion-label>
</ion-item>
<ion-item>
<button ion-button outline (click)="contactDetails()">Display Contacts</button>
</ion-item>
<ion-item>
<ion-card>
<ion-card-content [hidden]="!search">
<ion-item *ngFor="let cDetails of contactsList">
{{cDetails.displayName}} {{cDetails.phoneNumbers[0].value}}
</ion-item>
</ion-card-content>
<ion-card>
</ion-item>
</ion-list>
When I build project with this code, the app is showing only white screen. Please help me to fix the code.