Getting call logs from a device in an app can be used for legitimate reasons like sharing an invite link or sending a message from the app itself.
Using the Cordova and ionic Native plugins, we can also get the device's Call Logs in Ionic. The Call Logs plugin is easy to use, but it is also a bit tricky.
So, in this actricle, we'll make a new Ionic 4 app that will list Recent Call Logs from the device and allow the user to call a number by tapping on it. A user can change the details in the Contact log from Incoming to Outgoing or Rejected.
Let’s get started!
By the way, if you want to learn how to manage phone contacts or create contacts management app in Ionic/Angular, you can check our this article: Manage Phone Contacts in Ionic/Angular
Create Ionic/Angular Application
You need NodeJS and Ionic Cordova CLI installed in order to make an app.
Use the command below to set up Ionic.
npm install -g ionic@latest cordovaAfter making sure these are installed, run the command below to start a new Ionic 4/5 project. don't forget to change name> to the name you wanted for your project.
ionic start <name> blank --type=angular --spec falseInstall Cordova & Ionic Native Plugin
We'll install the two plugins in our Ionic/Angular application to get call clogs:
CallLog plugin to get call logs from the device's recent call storage. This plugin has a filter attribute that lets us get information based on type, number, name, date, etc. CallNumber will be the second. With the CallNumber plugin, the user can tap on a listed call item to make a call with just one tap.
You can install CallLog plugin using the below two commands in your favourite CMD/terminal:
This will install our project's CallLog plugin. Now, run these two commands in your favorite terminal to install the CallNumber plugin:
This will install our project's CallLog plugin.
Now that the CallLog & CallNumber plugins have been added to our application. We need to import it into the app.module.ts file before we can use it in our application.
In the app.module.ts file, add the CallLog and CallNumber classes.
All done! You can now use CallLog & CallNumber All you have to do is inject them into your component.
Home Page Updated HTML
Change the following HTML in the home.page.html file to show buttons to switch between call log types and list calls in cards. This structure can be changed to fit your needs.
Add Plugin Functions Home Component
We will add methods for Call Log and Call Number to the component in the home.page.ts file.
import { Component } from '@angular/core';
import { CallNumber } from '@ionic-native/call-number/ngx';
import { CallLog, CallLogObject } from '@ionic-native/call-log/ngx';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
filters: CallLogObject[];
recordFound: any;
recordFoundText: string;
listTyle:string;
constructor(
public callLog: CallLog,
public callNumber: CallNumber,
public platform: Platform
) {
this.platform.ready().then(() => {
this.callLog.hasReadPermission().then(isPermission => {
if (!isPermission) {
this.callLog.requestReadPermission().then(res => {
this.getContacts('type','1','==');
})
.catch(e => alert(' Request Read Permission ' + JSON.stringify(e)));
} else {
this.getContacts('type', '1', '==');
}
})
.catch(e => alert(' Is Read Permission ' + JSON.stringify(e)));
});
}
getContacts(name: any, value: any, operator: any) {
if(value == '1'){
this.listTyle = "Incoming Calls - yesterday";
}else if(value == '2'){
this.listTyle = "Ougoing Calls - yesterday";
}else if(value == '5'){
this.listTyle = "Rejected Calls - yesterday";
}
// Yesterday Time
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(today.getDate() - 1);
const fromTime = yesterday.getTime();
this.filters = [{
name: name,
value: value,
operator: operator,
}, {
name: 'date',
value: fromTime.toString(),
operator: '>=',
}];
this.callLog.getCallLog(this.filters)
.then(res => {
this.recordFoundText = JSON.stringify(res);
this.recordFound = results;//JSON.stringify(res);
})
.catch(e => alert(' Err ' + JSON.stringify(e)));
}
callThisNumber(number: string){
this.callNumber.callNumber(number, true)
.then(res => console.log('Launched Phone/Caller!', res))
.catch(err => console.log('Error launching Phone/Caller', err));
}
}
You can now run the following below command to test this app on a real device.
ionic cordova run android --deviceNow that we've finished, you can look at the plugin's documentation for more filter options.