title: Order and grouping alphabetically
body: <p>I need to create UI as shown below. I need to order the <code>name alphabetically</code> and need to group like <code>A</code>,<code>B</code> and so on.</p>
  
  <p><a href="https://i.stack.imgur.com/nTCPz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nTCPz.png" alt="enter image description here"></a></p>
  
  <p>I have done the first part (i.e. order the name alphabetically using <code>lodash</code>) as shown below.</p>
  
  <p><a href="https://i.stack.imgur.com/9I8sO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9I8sO.png" alt="enter image description here"></a></p>
  
  <p><em>contacts.html</em></p>
  
  <pre><code>&lt;ion-list&gt;
      &lt;ion-item *ngFor="let c of contacts | async"&gt;
        &lt;name-and-rating item-start [data]="c"&gt;&lt;/name-and-rating&gt;
        &lt;ion-input type="text" text-right disabled="true" [value]="c.company"&gt;
        &lt;/ion-input&gt;
      &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  </code></pre>
  
  <p><em>name-and-rating.html (component)</em></p>
  
  <pre><code>&lt;div&gt;
    &lt;div&gt;
      {{data.name}}
    &lt;/div&gt;
    &lt;div&gt;
      &lt;rating [ngModel]="data?.rating" (ngModelChange)="data.rating=$event" readOnly="true" max="5" emptyStarIconName="star-outline"
      halfStarIconName="star-half" starIconName="star" nullable="false" name="rating" item-end&gt;
    &lt;/rating&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>add-contact.ts</em></p>
  
  <pre><code> addContact() {
      this.storage.get('contacts').then((val: Contact[]) =&gt; {
        this.contacts = val;
        if (this.contacts == null) this.contacts = [];
        this.contacts.push(this.data);
        const sortedContacts = orderBy(this.contacts, [c =&gt; c.name.toLowerCase()], ['asc']);
        this.storage.set('contacts', sortedContacts).then((val: Contact[]) =&gt; {
          this.close();
        });
      });
    }
  </code></pre>
  
  <p><em>contact.ts</em></p>
  
  <pre><code>export class Contact {
      id: string;
      name: string;
      company: string;
      phone1: number;
      phone2: number;
      email: string;
      rating: number;
      comments: string;
  }
  </code></pre>
  
  <p>Can you tell me how to design or implement <code>alphabetically grouping</code> like on the first image?</p>