Introduction:

Install Contact Mock Plugin:

Configure Mock Plugin Script To Our Application:

Mock Contacts To Chrome Browser Local Storage:

Access Mocked Contacts:

Contacts List Display Html Code:

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

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); } }

Configure Contacts To AppModule:

Conclusion:

Refer:

In part -1 we have written code to create contacts, now using the mock-up plugin APIaccess user mobile contact to our application listing contacts pageInstall below mock plug-infor more go to this mock plugin link Now add the below js file path to "Scripts" array property in the angular.json file.after adding js file path rebuild the project again.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.Now we need to list all these contacts to our application as below UI.Now add the following Html code to tab3.page.htmNow add the following code in tab3.page.ts file1.ContactFieldType => collection which helps to search the contact information based on different categories like name, phone number, etc2.IContactFindOptions.Filter => key to search contacts3.Contacts.Find() => predefinded method to query contactNow 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.Now we can test all contact mobile features on the local browser using mock contact plugin at development time.