Phone call logs/ call history in Ionic

Ionic Framework ionic-v3
1

How can we use callsPlugin in our app?

Is there another way to show call history/ call log in android device?

any version of ionic will be preferable.

2

What is this? Is there a link?

3

check this link

4

So this doesn’t work in Ionic why?

5

Thats the issue i need to solve.

I installed this plugin. and added this given tutorial code to my controller.

then it was showing me an error which is “calls not defined”, then I tried to give the calls parameter in app.js as well as in controller.js but still it showing me an Injector error.

So I need a simple step by step guide to use this plugin.

6

Hi @atul2889, did you solve the problem?

7

Yes i have solved in ionic 4

8

Can you share the code, please?

9

Please check this below reference link. Hope this link will help you.
https://www.freakyjolly.com/ionic-4-read-call-logs-incoming-missed-outgoing-and-add-call-number-in-ionic-4-native/

Good luck
Thanks

10

I already checked it but it’s not working!

11

Dear its working for me.

12

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>
13

I used this code exactly same but it was only displaying this:

Screenshot_1

14

Do you have any other info?

15

yes i complete this module in angular