Introduction:

"Cordova-Plugin-Contacts-Mock" a third party plugin helps to mock the contacts and access them in the browser and test on the browser like do on mobile

"Note: Mocking of contact only works with chrome browser"

.

About Platform :

Create Ionic4 Application:

Install Ionic & Cordova Contact Plugin:

Create Contacts Form:

<ion-header> <ion-toolbar> <ion-title> Create New Contacts </ion-title> </ion-toolbar> </ion-header> <ion-content> <form [formGroup]="createContacts"> <ion-item> <ion-label position="floating">First Name</ion-label> <ion-input formControlName="firstName"></ion-input> </ion-item> <ion-item> <ion-label position="floating">Last Name</ion-label> <ion-input formControlName="lastName"></ion-input> </ion-item> <ion-item> <ion-label position="floating">Contat Number</ion-label> <ion-input formControlName="contactNumber"></ion-input> </ion-item> <ion-button expand="full" (click)="add()">Add Contact</ion-button> </form> </ion-content>

Add Contacts :

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { Contacts,Contact, ContactName, ContactField } from '@ionic-native/contacts/ngx'; @Component({ selector: 'app-tab2', templateUrl: 'tab2.page.html', styleUrls: ['tab2.page.scss'] }) export class Tab2Page { createContacts: FormGroup; constructor(private fb: FormBuilder, private contacts: Contacts,private route:Router) { this.initializeForm(); } initializeForm() { this.createContacts = this.fb.group({ firstName: ['', [Validators.required]], lastName: ['', [Validators.required]], contactNumber: ['', [Validators.required]] }); } resetForm(){ this.createContacts.patchValue({ firstName:'', lastName:'', contactNumber:'' }) } add() { if(!this.createContacts.valid){ return; } let contact:Contact = this.contacts.create(); contact.name = new ContactName(null, this.createContacts.controls.lastName.value, this.createContacts.controls.firstName.value); contact.phoneNumbers = [new ContactField('mobile', this.createContacts.controls.contactNumber.value)]; contact.save().then( () =>{ this.resetForm(); this.route.navigate(['tabs/tab3']) }, (error: any) => console.error('Error saving contact.', error) ); } }

Summary:

Refer:

In Ionic 4 had been provided with native APIto access mobile contacts. At development to test, accessing mobile contacts either we need to configure mobile emulators, or we need to connect the real device which bit complex approach.. So testing on the browser is the fastest and comfortable approach to test user contactsAPI helps mock the contacts in our local browser (Developer Tools => Application => Local Storage) which helps to test all the features that are originally provided by Ionic 4 native API1.Ionic 42.Angular 8.0vCreate an Ionic 4 application, in this sample, I'm using a predefined tabs template project provided by Ionic 4 CLI. Read more for Ionic 4 project creation here After the project created, run the application with the commandand the application gets launched as below.Now here from this sample app, we are going to implement functionality to access or modify mobile contacts with helpAPI. Install below packages to our projectNow we are going to create a form in our ionic application, this form uses to create a new contact on a mobile device, but using same contact adding Cordova functionality we are going to use this form to mock the mobile contacts into the browser so that we can test them on Chrome Browser. Need to design add new contact page as below.Add the below HTML code to tabe2.page.html filehere using angular reactive form consist of first name, last name, and phone number fields to create contactAdd follow code tab2.page.ts file as below'Contacts.create()' method instantiate an object to create new contact.'Contact.name' is a property which holds memory to the contact name, for this creates an object of 'new ContactName()'. This 'ContactName' constructor accept 6 optional parameters.'formatted' The complete name of the contact.'familyName' The family name of the contact or last name of the person.'givenName' The contact's given name or person's first name.'middleName' The contact's middle name.'honorificPrefix' The contact' name prefix like 'Mr.' or 'Dr.''honorificSuffix' The contact's name suffix.In our sample, we provide 'givenName' and 'familyName' for testing to create contact.'Contact.phoneNumber' property holds a collection of 'ContactField' objects. 'ContactFiled' acceptsparameter like the type of contact and contact number.'Contact.save()' is a promise, which helps to create a new contact with provided data.Till now we have not used any mock plugin to create contacts. Now using this application by opening the mobile emulator or connecting to real device we can create new contacts into the device. But our main aim is to test the contact in the chrome browser, for that, we need to install contacts mock plugin. To test mock contacts visit part -2