when building an android app for accessing call history log using ionic-v3, it doesn’t show any log when first running after granting permission. But when we close and open the app, the logs are displaying. What is actually the problem? can anyone find it ?
And also i want to add InfiniteScroll to this recent page. what should i do when it using JSON object. i didnt get any clear picture of parsing the JSON array in my below code.
app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AndroidPermissions } from '@ionic-native/android-permissions';
import { TabsPage } from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, androidPermissions: AndroidPermissions) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
androidPermissions.requestPermissions(
[
androidPermissions.PERMISSION.READ_CALL_LOG
]
);
});
}
}
recent.html
<ion-header>
<ion-navbar color="primary">
<ion-title>
Recent
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>Call Log History on this device</ion-list-header>
<!-- <ion-item *ngFor="let d of mobileId"> -->
<ion-item *ngFor="let d of mobileId">
<ion-avatar [ngSwitch]=d.type item-start>
<img *ngSwitchCase="'OUTGOING'" src="assets/imgs/icon-OUTGOING.png" height="24" width="24">
<img *ngSwitchCase="'INCOMING'" src="assets/imgs/icon-INCOMING.png" height="24" width="24">
<img *ngSwitchCase="'MISSED'" src="assets/imgs/icon-MISSED.png" height="24" width="24">
<img *ngSwitchDefault src="assets/imgs/icon-REJECTED.png" height="24" width="24">
</ion-avatar>
<h2 class="numberBold">{{d.phoneNumber}}</h2>
<p class="subInfo">{{d.date+' ( ' + d.callDuration + ' )'}}</p>
</ion-item>
</ion-list>
</ion-content>
recent.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Device } from '@ionic-native/device';
import { AndroidPermissions } from '@ionic-native/android-permissions';
import { Toast } from '@ionic-native/toast';
@Component({
selector: 'page-recent',
templateUrl: 'recent.html',
providers: [Device]
})
export class RecentPage {
public mobileId: {};
public callTypeIcon: any;
constructor(public navCtrl: NavController, private androidPermissions: AndroidPermissions, public device: Device, private toast: Toast) {
this.checkPermission();
}
async checkPermission() {
try {
const { hasPermission } = await this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_CALL_LOG);
if (!hasPermission) {
const result = await this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_CALL_LOG);
if (!result.hasPermission) {
console.log('call log permission is false');
this.toast.show('You need to set permission to read call logs in app settings', '5000', 'center').subscribe(
toast => {
console.log(toast);
});
}
}
else {
console.log('call log permission is true');
console.log('calling loadCallLog()');
this.loadCallLog();
}
} catch (errorPermission) {
console.error('Error in Call log', errorPermission);
}
}
async loadCallLog() {
try {
console.log('inside loadCallLog()');
this.mobileId = JSON.parse(this.device.uuid);
if (this.mobileId == null) {
console.log('mobileid is null ');
}
else {
console.log('mobileid is not null ');
this.toast.show('Call load load complete !', '5000', 'bottom').subscribe(
toast => {
console.log(toast);
});
}
}
catch (errorLoadCallLog) {
console.error('Error in Call log', errorLoadCallLog);
}
}