app-myapp/modules/contact/contact-list/contact-list.page.ts

import { Component, OnInit } from '@angular/core';
import * as Parse from "parse";
@Component({
  selector: 'app-contact-list',
  templateUrl: './contact-list.page.html',
  styleUrls: ['./contact-list.page.scss'],
})
export class ContactListPage implements OnInit {
  searchName: string = '';
  contactList: Array<Parse.Object> = [];

  ngOnInit() {
    this.loadContact();
  }

  charGroupIndex:any = {}
  loadContact() {
    const Contact = Parse.Object.extend('Contact');
    const query = new Parse.Query(Contact);
    query.ascending('firstChar');

    if (this.searchName) {
      query.contains('name', this.searchName);
    }

    query.find().then((results) => {
      this.contactList = results;
      this.contactList.forEach((contact,index)=>{
        if(this.charGroupIndex[contact.get("firstChar")] == undefined){
          this.charGroupIndex[contact.get("firstChar")] = index
        }
      })
    }, (error) => {
      console.error('Error while fetching contacts', error);
    });
  }

  search() {
    this.loadContact();
  }

}