On the application's user interface, the contact list from a mobile device

I have successfully integrated the Contacts native plugin from Ionic 3 into my app. While it is functioning properly, I am facing an issue with implementing it within the app's UI. Currently, the contact list loads outside the app and only returns to the UI after a contact has been selected. Is there a way to keep it within the app's interface? Or is this limitation due to it being a native feature of the phone?

ionViewDidEnter() {  
     if (this.platform.is('cordova')) {
        this.contacts.pickContact().then(response => {
         });
      }
  }

Similar to how this was achieved in the Zoiper app: I would like to replicate this functionality using Ionic 3. Is there a way to achieve this?

https://i.sstatic.net/5L23S.png

cssangulartypescriptionic3cordova-plugins

Answer №1

To retrieve a list of contacts, use the following code snippet:

import { Contacts, ContactFieldType, ContactFindOptions } from '@ionic-native/contacts';

 constructor() {

    Contacts.find(['displayName', 'name', 'phoneNumbers', 'emails'], {filter: "", multiple: true})
    .then(data => {
      this.allContacts = data
    });

After fetching the contacts, you can create a clickable list or customize it according to your requirements using the allContacts array.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying Regular Expressions in Java to "convert" a CSS style into an HTML tag style

In my Java code, I have a String variable that contains HTML code like this: <span style="text-decoration: underline;">test</span> My goal is to convert it to look like this: <u>test</u> If the HTML code is like this: <span ...

javahtmlcssregex

Attempting to access jQuery from an external JavaScript file within the Ionic 5 framework

Currently, I am working on an Ionic app with Angular. I want to call my JavaScript function when the document is ready in the JS file, but I keep encountering an error. Here is my watch.page.html: <ion-content> <div class="videoContainer&qu ...

jqueryangularionic-framework

Require styling for the heading as per the specified criteria

My task is to meet the following specifications: Show text with proper formatting <h2 class="heading"> Hello dear friends </h2> Expected outcome: https://i.sstatic.net/I4Kmq.png Specifications include: HTML cannot be changed Avoid usi ...

htmlcsssass

Deploy an Angular 2 application on Firebase using Travis CI

I am attempting to deploy my Angular 2 application on Firebase using Travis CI, but it seems that the dist folder generated by ng build --prod cannot be located. Here is my .travis.yml # tavis.yml language: node_js node_js: - "7" branches: only: ...

angularfirebasetravis-ci

CSS animations are not functioning properly on disabled Bootstrap buttons

One issue I'm facing is with a BootStrap button that I'm rendering in React. The button has a property or a condition that determines if it's disabled: <Button bsClass="fill" disabled={!props.purchaseble} onClick={conso ...

htmlcssreactjstwitter-bootstrap

Background with funky Font Awesome colors

Font Awesome is working perfectly for me, but I'm experiencing an issue with strange borders appearing around the icons in Chrome. Interestingly, this problem doesn't occur in IE and Firefox browsers. What's even more peculiar is that the bo ...

htmlcsstwitter-bootstrapfont-awesome

Angular allows you to pass an array of objects as FormData items

Is there a way to send FormData with an array of objects to an API? I have attempted the following: https://i.stack.imgur.com/BlYby.png This is the request payload. How can I retrieve all items with other data from my .NET Core C# API? public class Back ...

c#angular.net-coreform-data

Error message: Typescript class unable to access methods because of undefined properties (TypeError: Cannot read properties of undefined (reading 'method_name'))

During the compilation process, everything goes smoothly with no errors. However, when I try to call the method in the controller, an error occurs. It seems that some class methods are missing during the compilation phase. If you require more information ...

node.jstypescriptexpresscompiler-errorsexpress-ws

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

htmlcssflexboxcss-selectors

`Incorporating ordered indices within two ngFor loops?`

Below is a demo code where I am explaining my goal through comments: product.component.html <div *ngFor="let item of items1"> <div *ngFor="let item of items2"> <input type="text" value="{{data[getNumber()]}}"> //I aim to fe ...

javascriptangulartypescript

What is the best way to convert an array of data into a dataset format in React Native?

Within my specific use case, I am seeking to reform the array structure prior to loading it into a line chart. In this context, the props received are as follows: const data = [26.727, 26.952, 12.132, 25.933, 12.151, 28.492, 12.134, 26.191] The objective ...

javascripttypescriptreact-native

Sending various arguments within a single post request in Angular 6 and Node.js

I am currently developing an app in Angular 6 using NodeJS + Mongoose. I have two parameters that need to be sent to the backend with a single POST request. My query is, is it possible to include both parameters in one POST Request? Thank you The paramet ...

node.jsangularmongoose

How to access the dynamic route's path in Next.js when using Server Components?

Obtaining the dynamic route path in a Next JS server component poses a challenge. This task is simple when working with client components. If you are working on src/app/[id]/page.tsx "use client"; import { usePathname } from "next/navigatio ...

javascriptreactjstypescriptnext.js

Position images inside a stylish border using CSS styling

//UPDATE: I've made some changes to the Pen, so now everyone can view the solution! Check it out here. My goal is quite simple in my opinion. I want to create an image that zooms in when you hover over it but doesn't increase in size. I attempte ...

htmlimagecssborder

Issue with displaying Bootstrap 3 modal on Mozilla browser

Hello everyone, I've encountered an issue with my Bootstrap modal on Mozilla browser. Everything works perfectly on Chrome and Safari, but when I click the modal button in Mozilla, nothing happens. Here's a snippet of my code: <button type="b ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Can I trust PHP to create my stylesheet using file_put_contents securely?

In an effort to build websites that are easy to maintain, I came up with a solution to use PHP to call in HTML lines and generate a stylesheet with only the necessary CSS. This way, I can make changes to the CSS once and have it apply to multiple elements. ...

phphtmlcssstylesheettemporary-files

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Hey there! I've been exploring this tool to customize the default scroll-bar, and here's a fiddle showcasing my experimentation. In the fiddle, I've included the following code snippet <div class="scroll-pane horizontal-only">(located ...

javascriptjqueryhtmlcss

Eliminate nested object properties using an attribute in JavaScript

I am working with a nested object structured like this const data = [ { id: '1', description: 'desc 1', data : [ { id: '5', description: 'desc', number :1 }, { id: '4', description: 'descip& ...

javascriptangulartypescriptchart.js

An error occurred due to an unexpected token found in the JsonForms custom-renderer props

I found inspiration in an example from this website to develop a custom renderer for JsonForms using Vue: However, as I implement this example in my .vue file within the script tags, I encounter an error UnexpectedToken right after declaring the props. It ...

typescriptvue.jsvuejs3jsonforms

A guide to setting initial values in Angular 2 using TypeScript

My Rank class includes attributes for "loses" and "wins" obtained from a web service. I need to calculate the "points" attribute based on these values. For example: for(int i = 0; i<loses; i++{ points += 1; } for(int i = 0; i<wins; i++{ point ...

ooptypescript