I have an array of Objects that I would like to display in a Mat-Selection-List. These Objects have two properties, one which I want to group by and use as subheaders (foo) and one I would like to list/display (bar). The list should display all the objects all the time (so no filtering), the catch is that only the bar property is displayed and the objects are grouped by their foo-Property, which is used as a subheader.

The list should be built dynamically and eventually look similar to the following:

<mat-list>
  <ng-container *ngFor="each different Foo of Object-Array"
    <div mat-subheader> foo </div>
    <mat-list-item *ngFor="every object with this foo">    
      <div> bar </div>
    </mat-list-item>
  </ng-container>
</mat-list>

The *ngFors in the above code don't work and are intended to show what I'm trying to do. What is the "Angular-Way" of achieving such a list from an Array of Objects? Are Pipes the way to go and if so what should they look like?