I can't fetching contacts of names and phone in ionic3

[Dedoo]

in file HTML

                        <div class="container" *ngFor="let contact of contactlist">
                            <h2 class="name">{{contact.displayName}}</h2> 
                            <p class="number">{{ contact.phoneNumbers }}</p>
                        </div>
                       
               

in file TS

import { IonicPage, NavController } from 'ionic-angular'; 
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts';   
@IonicPage()
@Component({
  selector: 'page-add-chat',
  templateUrl: 'add-chat.html',
  providers: [Contacts]}
)
export class AddChatPage {  
  private contactlist: any[];   
   constructor(public navCtrl: NavController, 
     private contacts: Contacts   ) {
 
      this.contacts.find(["displayName", "phoneNumbers"], {multiple: true}).then((contacts) => {
        this.contactlist = contacts;
      });
         
} 

[addwebsolution]

Hi, @Dedoo

Try this:

.html

<div class="container" *ngFor="let contact of contactlist">
    <h2 class="name">{{contact.displayName}}</h2> 
    <p class="number">{{ contact.phoneNumbers }}</p>
</div>

.ts

import { IonicPage, NavController } from 'ionic-angular'; 
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts';   

@IonicPage()

@Component({
  selector: 'page-add-chat',
  templateUrl: 'add-chat.html',
  providers: [Contacts]
})

export class AddChatPage {  

    private contactlist: any[]; 

	constructor(public navCtrl: NavController, private contacts: Contacts) { 
		this.fetchDeviceContact();
	}


	 fetchDeviceContact(){

	 	var options = {
		    filter : "",
		    multiple:true,
		    hasPhoneNumber:true	
		};


		this.contacts.find(["*"],options).then((res) => {

			for (var i = 0; i < contacts.length; i++) {
		        var contact = contacts[i];
		        var no =contacts[i].name.formatted;
		        var phonenumber=contacts[i].phoneNumbers;
		        if(phonenumber != null) {
		            for(var n=0;n<phonenumber.length;n++) {
		                var type=phonenumber[n].type;
		                if(type=='mobile') {
		                    var phone=phonenumber[n].value;
		                    var mobile;
		                    if(phone.slice(0,1)=='+' || phone.slice(0,1)=='0'){
		                        mobile=phone.replace(/[^a-zA-Z0-9+]/g, "");
		                    }
		                    else {
		                        var mobile_no=phone.replace(/[^a-zA-Z0-9]/g, "");
		                        mobile=mobile_no;
		                    }

		                    var contactData={
		                        "displayName":no,
		                        "phoneNumbers":mobile,
		                    }
		                    this.contactlist.push(contactData);
		                }
		            }
		        }
		    }

				console.log("contactlist >>>",this.contactlist);

		}).catch((err) => {
		  	console.log('err',err);
		});

	}    
         
}

Thanks.

[Dedoo]

Thanks for answer me again
but can’t not found of countrycode
this code
@addwebsolution

 else {
                         var mobile_no=phone.replace(/[^a-zA-Z0-9]/g, "");
                         mobile=countrycode+mobile_no;
                     }

[addwebsolution]

Please, check my updated answer.

[Dedoo]

@addwebsolution
don’t display on phone
This is link of plugin

Ionic Framework

[elizaOne]

I have tried but showing error, can you please help me to find solution.
Actually I want to import ‘Phone Contacts’ to my application which is providing call and message facility.

[elizaOne]

[SidDarthBisht]

Replace contacts by res.