Ionic2 + phone Address Book components grouped by name

Ionic2 Name Group Phone Address Book component implements the following functions

• Get phone Address Book data
• Data grouping display (Chinese and English correctly grouped)
• Click on the index to jump
• Scroll to special locations for special handling
• Contact Inquiry

Preview

Contacts.html

<ion-header>  <ion-navbar>    <ion-title>Select a contact</ion-title>  </ion-navbar></ion-header><ion-contentpadding> <ion-searchbar [Debounce]="Searchdebounce" [(Ngmodel)]="Searchkey"   [Showcancelbutton]="Shouldshowcancel"   (ioninput)="Oninput ($event)" (Ioncancel)="OnCancel ($event)">  </ion-searchbar><ion-rowstyle="height:88%">     <ion-colcol-11 >    <!--<div *ngif= "!contactlist| | Contactlist.length<=0 "><div > Phone contacts no contacts </div></div>    <ion-scroll #scrollscrolly="true"style="height:100%">        <ion-item-group *ngfor="Let ContactItem of ContactList" >          <ion-item-dividercolor="Light"id="Index_{{contactitem.letter}}">{{Contactitem.letter}}</ion-item-divider>          <ion-item *ngfor="Let contact of contactitem.contact" (click)="SelectContact (Contact)">           <!--<ion-avatar item-start></ion-avatar>            {{Contact.displayname}}            <p>Mobile: {{Contact.phonenumbers[0].value}}</p>          </ion-item>        </ion-item-group>    </ion-scroll>  </ion-col>  <ion-colcol-1 class="Index-num">    <div  *ngfor="Let Indexitem of Contactindex" (click)="Gotoindex (indexitem)">{{Indexitem}}</div>  </ion-col></ion-row> </ion-content>

Contacts.scss

.index-num{  color:blue;    font-size:13px;}.scroll-content{  padding:0px!important}.red-index{  color:red;}

Contacts.component.ts

Import {Component, viewchild} from ' @angular/core '; import {navcontroller, navparams} from ' ionic-angular '; import {Con Tacts} from ' @ionic-native/contacts ', import {commonutil} from '. /common.util '; @Component ({selector: ' Contacts ', Templateurl: ' contacts.html '})/** contact component @author 0o aria メ*/export class C  ontactscomponent {@ViewChild (' scroll ') scroll:any;  Private Contactlist:any;  Private contactindex:array<string>;  Private searchkey:string;  Private Shouldshowcancel:boolean;  Public Iscordova:boolean;  Public searchdebounce:number = 600;  Public currentid:string;  Private Isios:boolean; Constructor (private commonutil:commonutil, private contacts:contacts, public navctrl:navcontroller, public navparams:  Navparams) {this.initdata (); /** Scroll to a specific location to do special processing demo */Ngafterviewinit () {if (!this.iscordova) {This.scroll.addScrollEventListener (even        T) = = {Let Positionn = document.getElementById (' index_ ' + ' N '). OffsetTop; Let positions = document.getElementById (' index_ ' + ' S '). OffsetTop; if (Event.currentTarget.scrollTop > Positionn && event.currentTarget.scrollTop < positions) {Conso          Le.log (' in module n ');        This.currentid = ' N ';          } else if (Event.currentTarget.scrollTop > Positions) {console.log (' in module S ');        This.currentid = ' S ';          } else {this.currentid = ';        Console.log (' n Module not yet reached ');    }      });    }} initdata (): void {this.searchkey = "";    This.shouldshowcancel = true;    This.iscordova = This.commonUtil.isCordova ();    This.isios = This.commonUtil.isIOS ();    This.contactindex = ' abcdefghijklmnopqrstuvwxyz '. Split ('); Alert (. Iscordova) if (This.iscordova) {Let opts = {filter: "", Multiple:true, Hasphone      Number:true, fields: [' displayName ', ' name ']};      Let me = this; This.contacts.find ([' DisplayName ', ' name '], opts) then ((contactlist) = {Me.conTactlist = ContactList;        Console.log (contactlist) Me.generatecontactgroup (contactlist);        }, (Error) = {Console.log (error);    });      } else {Let data = This.initbrowserdata ();    This.generatecontactgroup (data); }}/** calls the callback method to transfer the selected contact information, and then jumps back to the previous page Demo:this.navCtrl.push (Contactcomponent,{callback:this.callbacktest,sco        Pe:this});      Callbacktest (param):P romise<any>{let me = this;        return new Promise (resolve = {Me.recommendphone = Param.phonenumbers[0].value;;        Console.log (Me.recommendphone);      Resolve (' success ');    })} */selectcontact: void {if (!contact) contact = null;    Let callback = This.navParams.get ("callback");    Let scope = this.navParams.get ("Scope");      if (!callback | |!scope) {alert (' callback function or scope is not provide! ');    Return    } callback.call (scope, contact). then (() = {This.navCtrl.pop ();  }); } OninpuT ($event): void {console.log ($event);         if (This.iscordova) {Let opts = {Filter:this.searchKey, multiple:true, Hasphonenumber:true,      Fields: [' displayName ', ' name ']}; This.contacts.find ([' DisplayName ', ' name '], opts) then ((contactlist) = {This.contactlist = Contactli          Qty        Console.log (contactlist) This.generatecontactgroup (contactlist);        }, (Error) = {Console.log (error);    });      } else {Let data = This.initbrowserdata ();    This.generatecontactgroup (data); }} onCancel ($event): void {}/** Contact Group */Generatecontactgroup (arr) {if (!      String.prototype.localeCompare) {console.error (' localecompare function not found ');    return [];    }//entmp cnarray Let Enresult = This.sortencontacts (arr);    Console.log (' Generatecontactgroup=>enresult ', enresult);    Let Sortresult = enresult.entmp;    Let Cnarray = Enresult.cnarray; Let Enkey =' ABCDEFGHIJKLMNOPQRSTUVWXYZ '. Split (');    Let letters = "*abcdefghjklmnopqrstwxyz". Split (');    Let en = "Ah eight cha ehegan xu ha ridiculed ka measles hallasan oh 妑 seven 呥 limitation it 穵 XI ya as". Split (');      for (Let i = 0; i < letters.length; i++) {let-letter = Letters[i].touppercase ();      Let Curr;      if (Sortresult[letter]) {curr = Sortresult[letter];      } else if (' * '! = Letters[i]) {Curr = Sortresult[letter] = []; } for (var j = 0; J < Cnarray.length; J + +) {if (!zh[i-1] | | | zh[i-1].localecompare (cnarray[j].displayn        Ame, ' zh ') <= 0) && cnarray[j].displayname.localecompare (zh[i], ' zh ') = =-1) {Curr.push (cnarray[j]);    }}} Let Contactresult = [];      for (Let k = 0, K < enkey.length; k++) {Let item = Sortresult[enkey[k]];    if (item && item.length > 0) contactresult.push ({letter:enkey[k], contact:item});    } console.log (Contactresult);    This.contactlist = Contactresult;  return contactresult; }/** Contact English name first minuteGroup */sortencontacts (contactlist:array<any>) {Let en = [' A ', ' B ', ' C ', ' D ', ' E ', ' F ', ' G ', ' H ', ' I ', ' J ', ' K ',    ' L ', ' M ', ' N ', ' O ', ' P ', ' Q ', ' R ', ' S ', ' T ', ' U ', ' V ', ' W ', ' X ', ' Y ', ' Z '];    Let entmp = {};    Let Cnarray = []; for (var i = 0; i < contactlist.length; i++) {if (This.isios && This.iscordova) {Contactlist[i].di      Splayname = contactlist[i].name.formatted;      } Let letter = Contactlist[i].displayname.touppercase (). charAt (0); if (En.indexof (letter) >= 0) {if (entmp[letter] = = undefined) {Entmp[letter] = []} EnT      Mp[letter].push (Contactlist[i]);  } else {Cnarray.push (contactlist[i])}} return {' entmp ': entmp, ' Cnarray ': Cnarray};    } gotoindex (letter): void {console.log (letter);    Let target = document.getElementById (' index_ ' + letter);  if (target) this.scroll._scrollcontent.nativeelement.scrolltop = Target.offsettop; } initbrowserdata (): Array<any> {return [{displayName: ' Jack ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Mr. Chen ', Phonenumbe RS: [{value: ' 13626578952 '}]}, {displayName: ' Mr. Wu ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: '    Mr. Wang ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Miss Lin ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Mr. Fung ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Chekiang ', phonenumbers: [{value: ' 1362657  8952 "}]}, {displayName: ' Huang Sheng ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Jack ', phonenumbers: [{ Value: "13626578952"}]}, {displayName: ' Mike ', Phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Ivin ' , phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Kevin ', Phonenumbers: [{value: ' 13626578952 '}]}, { DisplayName: ' Who ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Miss Zhang ', phonenumbers: [{value: ' 1362657895 2 "}]}, {DisplaynamE: ' Good ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' tag ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' OK ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Jack ', phonenumbers: [{value: ' 1362 6578952 "}]}, {displayName: ' Fary ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' note ', PhoneNumber S: [{value: ' 13626578952 '}]}, {displayName: ' May ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' m Oon ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' month ', phonenumbers: [{value: ' 13626578952 '}]}, {  DisplayName: ' Fai ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Ming ', phonenumbers: [{value: ' 13626578952 ' }]}, {displayName: ' Guosheng ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' kity ', phonenumbers: [{valu  E: "13626578952"}]}, {displayName: ' Marry ', phonenumbers: [{value: ' 13626578952 '}]},]; }}

Ionic2 + phone Address Book components grouped by name