Looking for a solution to dynamically switch between different departments and list employees within each department as the value changes in Angular. Essentially, I need to display the employees under each department, print the department name when it changes, and continue this pattern until another department change occurs. Is there a way to achieve this in Angular?
It should look something like this...
Department A
Name 1
Name 2
Name 3
Department B
Name 1
Department C
Name 1
Name 2
Name 3
Name 4
<div class="col-12 col-sm-6 col-xl-4 col-3xl-3 mb-4">
<div class="card">
<div class="card-body">
<p class="card-text card-subtle-text ">{{item.DEPARTMENT}}</p>
<h3 class="card-title card-heading card-title-mark">{{item.NAME}}</h3>
<span class="card-support">{{item.JOBTITLE}}</span>
<p class="card-text">{{item.CAMPUS}}</p>
<p class="card-text"></p>
<p class="card-text"><strong>Phone: </strong>{{item.PHONE}}</p>
<p class="card-text"><strong>Email: </strong><span ng-bind-html="item.EMAIL"></span></p>
</div>
</div>
</div>