title: ngFor group by key and display key for each group
body: <p>I need to sort out the best way to get my object grouped and then loop those groups in my template.</p>
  
  <p>The data is not sent to me grouped so in my component, I add a key to each array in the object:</p>
  
  <pre><code>ngOnInit(): void {
      this.getEmailsService.emailsAPI().subscribe(
          data =&gt; {
              let firstChar: string
              this.results = data
              this.emails = this.results
              this.emails.forEach(element =&gt; {
                  firstChar = element.sender_email.charAt(0);
                  element.key = firstChar
                  console.log(element)
              });
          }
      );
  }
  </code></pre>
  
  <p>the resulting dictionary looks like this:</p>
  
  <pre><code>created: "2017-10-07T01:42:25.110747Z"
  email_domain: "domain.com"
  has_user_viewed: false
  key: "j"
  pk: "wGR"
  sender_email:"someone@domain.com"
  sender_name: null
  </code></pre>
  
  <p>then in my template I have:</p>
  
  <pre><code>&lt;div class="col-sm-6 mb-3" *ngFor="let email of emails | filter : searchText"&gt;
  </code></pre>
  
  <p>what would be the best way to handle grouping this by the <code>key</code> value and then also displaying the "master" 'key' for each group? so that you had something like:</p>
  
  <pre><code>key 
  -&gt;result
  -&gt;result
  -&gt;result 
  key 
  -&gt;result
  -&gt;result
  -&gt;result 
  </code></pre>