Ionic 4: Test mobile contacts at the local browser at development time using the mock plugin ( Part - 2)

Introduction:

In part -1 we have written code to create contacts, now using the mock-up plugin API "Cordova-Plugin-Contacts-Mock" access user mobile contact to our application listing contacts page.  Click here to read part - 1

Install Contact Mock Plugin:

Install below mock plug-in
                     "npm install cordava-plugin-contacts-mock --save-dev"
for more go to this mock plugin link

Configure Mock Plugin Script To Our Application:

Now add the below js file path to "Scripts" array property in the angular.json file.

  "node_modules/cordova-plugin-contacts-mock/build/contacts-mock.js"

after adding js file path rebuild the project again.

Mock Contacts To Chrome Browser Local Storage:

Run the application and go to the second tab in the sample project which is created to add new contacts. Using that code creates few dummy contacts which are going to be accessed as mobile contact to test "Cordova-plugin-contacts" API.

All the contacts that are added will be stored in browser local storage as below.

Access Mocked Contacts:

Now we need to list all these contacts to our application as below UI.

Contacts List Display Html Code:

Now add the following Html code to tab3.page.htm

  <ion-header>
  <ion-toolbar>
    <ion-title>
      Contacts List
    </ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-searchbar type="text" (ionInput)="searchText($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item-group *ngFor="let c of contactResultSubscriber | async">
      <ion-item-divider>
        <ion-label>{{ c.name.familyName }} {{ c.name.givenName }}</ion-label>
      </ion-item-divider>

      <ion-item>
        <ion-label>{{ c.phoneNumbers[0].value }}</ion-label>
      </ion-item>
      
    </ion-item-group>
  </ion-list>
</ion-content>

Step 6:
Now add the following code in tab3.page.ts file

  import { Component, OnInit } from '@angular/core';
import { Contacts, ContactFieldType, IContactFindOptions, Contact } from '@ionic-native/contacts/ngx';

import { BehaviorSubject, from } from 'rxjs';
import { switchMap, map } from 'rxjs/operators'


@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {


  fields: ContactFieldType[] = ['addresses' , 'birthday' , 'categories' , 'country' , 'department' , 'displayName' , 'emails' , 'name.familyName' , 'name.formatted' , 'name.givenName' , 'name.honorificPrefix' , 'name.honorificSuffix' , 'id' , 'ims' , 'locality' , 'name.middleName' , 'name' , 'nickname' , 'note' , 'organizations' , 'phoneNumbers' , 'photos' , 'postalCode' , 'region' , 'streetAddress' , 'title' , 'urls'];
  options: IContactFindOptions = {
    filter: '',
    multiple: true,
  };
  searchSubscriber: BehaviorSubject = new BehaviorSubject('');
  contactResultSubscriber:BehaviorSubject = new BehaviorSubject(null);

  constructor(private contacts: Contacts) { }

  ngOnInit() {
    this.contactsSource();
  }

  contactsSource() {
    this.searchSubscriber.
      pipe(
      switchMap((key) => {
        this.options.filter = key;
        return this.contacts.find(this.fields, this.options);
      }),
      map((value) => value)
      ).subscribe(
      (data) => { this.contactResultSubscriber.next(data); },
      (eror) => { console.log(eror) }
      );
  }

  searchText(e) {
    this.searchSubscriber.next(e.target.value);
  }

}

1.ContactFieldType => collection which helps to search the contact information based on different categories like name, phone number, etc
2.IContactFindOptions.Filter => key to search contacts
3.Contacts.Find() => predefinded method to query contact

Configure Contacts To AppModule:

Now we need to inject "Contacts" API in the app root module as below.

now run the application we can see all our contact list like the above screenshot.

Conclusion:

Now we can test all contact mobile features on the local browser using mock contact plugin at development time.
   "Note - while publishing app remove the Cordova-plugin-contacts-mock from the package.json file and remove the js file path node_modules/cordova-plugin-contacts-mock/build/contacts-mock.js from angular.json file"

Refer:

. Part - 1
. Source Code

Facebook

Twitter

Pinterest