Please check this below code.
.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { CallLog, CallLogObject } from '@ionic-native/call-log/ngx';
import { CallNumber } from '@ionic-native/call-number/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
filters: CallLogObject[];
recordsFound: any;
recordsFoundText: string;
listTyle:string;
constructor(
private callLog: CallLog,
private callNumber: CallNumber,
private platform: Platform
) {
this.platform.ready().then(() => {
this.callLog.hasReadPermission().then(hasPermission => {
if (!hasPermission) {
this.callLog.requestReadPermission().then(results => {
this.getContacts("type","1","==");
})
.catch(e => alert(" requestReadPermission " + JSON.stringify(e)));
} else {
this.getContacts("type", "1", "==");
}
})
.catch(e => alert(" hasReadPermission " + JSON.stringify(e)));
});
}
getContacts(name, value, operator) {
if(value == '1'){
this.listTyle = "Incoming Calls from yesterday";
}else if(value == '2'){
this.listTyle = "Ougoing Calls from yesterday";
}else if(value == '5'){
this.listTyle = "Rejected Calls from yesterday";
}
//Getting Yesterday Time
var today = new Date();
var yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
var fromTime = yesterday.getTime();
this.filters = [{
name: name,
value: value,
operator: operator,
}, {
name: "date",
value: fromTime.toString(),
operator: ">=",
}];
this.callLog.getCallLog(this.filters)
.then(results => {
this.recordsFoundText = JSON.stringify(results);
this.recordsFound = results;//JSON.stringify(results);
})
.catch(e => alert(" LOG " + JSON.stringify(e)));
}
callThisNumber(number){
this.callNumber.callNumber(number, true)
.then(res => console.log('Launched dialer!', res))
.catch(err => console.log('Error launching dialer', err));
}
}
.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic 4 Call Log Demo
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="4">
<ion-button (click)="getContacts('type','1','==')" size="small" color="success">Incoming</ion-button>
</ion-col>
<ion-col size="4">
<ion-button (click)="getContacts('type','2','==')" size="small" color="warning">Outgoing</ion-button>
</ion-col>
<ion-col size="4">
<ion-button (click)="getContacts('type','5','==')" size="small" color="danger">Rejected</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<strong>{{listTyle}}</strong>
</ion-col>
</ion-row>
</ion-grid>
<ion-card *ngFor="let contact of recordsFound" (click)="callThisNumber(contact['number'])">
<ion-card-header *ngIf="contact['name']" >
<ion-card-title>{{contact["name"]}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<strong>{{contact["number"]}}</strong>
</ion-card-content>
</ion-card>
</ion-content>