Conditional wrap items

Question

I am attempting to output an array of items grouped by common attributes.

For example: In this case, I would like to list the phone extension for each employee grouped by department.

My Data:

{ id: 0, name: 'Jim', department: 'Sales', extension: '346'},
{ id: 1, name: 'Joe', department: 'Accounting', extension: '318'},
{ id: 2, name: 'Kim', department: 'Accounting', extension: '338'},
{ id: 3, name: 'Sue', department: 'Sales', extension: '320'}

My HTML:

<div *ngFor="let employee of employees">
  <h4>{{ employee.department }}</h4>
  <ul>
    <li>{{ employee.name }} - {{ employee.extension }}</li>
  </ul>
</div>

Current Output

<h4>Sales</h4>
<ul>
  <li>Jim - 346</li>
</ul>

<h4>Accounting</h4>
<ul>
  <li>Joe - 318</li>
</ul>

<h4>Accounting</h4>
<ul>
  <li>Kim - 338</li>
</ul>

<h4>Sales</h4>
<ul>
  <li>Sue - 320</li>
</ul>

Desired Output:

<h4>Sales</h4>
<ul>
  <li>Jim - 346</li>
  <li>Sue - 320</li>
</ul>

<h4>Accounting</h4>
<ul>
  <li>Joe - 318</li>
  <li>Kim - 338</li>
</ul>

This answer achieves the desired result for older versions of Angular but I would like to know what the best practice is for Angular 2+.