Grouping entries in list by first letter


I got my contact list in sorted order too,but I want to get letters at starting of every new alphabet…like a the contacts with a ,b then contacts with b ,means grouping…
I am not able to this…I am getting first number ,but after that I am not able to get letters…

ts code-

export class ContactPage {
 groupedContacts = [];
  constructor(public navCtrl: NavController,public callNumber:CallNumber,
  private contacts: Contacts, private sanitizer: DomSanitizer,public popoverCtrl:PopoverController,public viewCtrl:ViewController) {
      ["displayName", "phoneNumbers","photos"],
      {multiple: true, hasPhoneNumber: true}
      ).then((contacts) => {
        for (var i=0 ; i < contacts.length; i++){
          if(contacts[i].displayName !== null) {
            var contact = {};
            contact["name"]   = contacts[i].displayName;
            contact["number"] = contacts[i].phoneNumbers[0].value;
            if(contacts[i].photos != null) {
              contact["image"] = this.sanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
            } else {
              contact["image"] = "assets/dummy-profile-pic.png";



  let sortedContacts = contactList.sort(function(a, b){
    if( < return -1;
    if( > return 1;
    return 0;

  let currentLetter = false;
  let currentContacts = [];

  sortedContacts.forEach((value, index) => {
    if( != currentLetter){
      currentLetter =;

      let newGroup ={
        letter: currentLetter,

      currentContacts = newGroup.contacts;

html code–

ion-item-group *ngFor="let group of groupedContacts">
    <ion-item-divider color="light">{{group.letter}}</ion-item-divider>   

        <ion-item-sliding *ngFor="let contact of contactList">
      <ion-avatar *ngIf="contact.image" item-start>
        <img [src]="contact.image">
       <ion-item-options side="right">
    <button ion-button color="secondary" *ngIf="contact.phoneNumbers"
      <ion-icon name="call"> Call</ion-icon>
   <ion-item-options side="left">
    <button ion-button color="danger" 

can u tell where I am wrong…

Image not displaying while displaying contacts

Some general advice:

  • Get the “sort contacts” list in its own function. Then you also don’t have to show it here as it is not relevant to this problem.
  • Same for the constructor - just tell people what format your sortedContacts is. That should be enough.
  • Last you should fix then intendation of your html - google for “htl beautifier” and use one of them to see what I mean.


I think it is generally a mistake to have the same data in two separate properties. I don’t see why both contactList and groupedContacts need to exist. In fact, if contactList did not exist, you would not have been tempted to try to access it from your template, which will (presumably wrongly) show every single contact under every single letter. The inner loop should be over group.contacts instead.