I have the json data as below.

 [
{
    "route":"vehicle",
    "next-route":"driver",
    "isActive":false
},
{
    "title":"Driver",
    "route":"driver",
    "next-route":"driver-details",
    "isActive":false
},
{
    "title":"Driver",
    "route":"driver-details",
    "next-route":"quote",
    "isActive":true
},
{
    "title":"Quote",
    "route":"quote",
    "next-route":"",
    "isActive":false
}
 ]

I am trying to loop through each object and if title is same , Iam displaying only the first object in the menubar. Based on the isActive field (which gets updated based on route) I am applying the active class to the object.

The following are the 3 titles displayed in the menubar and I want to keep the driver active for both the driver objects.

• Vehicle
• Driver
• Quote

I am comparing the current title with previous title and if both matches , i am skipping that object using ngIf condition

  <ul>
    <ng-container let menu of menuArray; let i=index>
      <!-- for 0 index there is no title , so ignore -->
      <ng-container *ngIf=" menu && menu.title && menuArray[i-1].title !== menuArray[i].title">
        <li [ngClass]="{active: menu.isActive}">
          <div>{{menu.title}}</div>
        </li>
      </ng-container>
    </ng-container>
  </ul>

How to keep the first driver object active when the current index is in second driver object (The second driver object will be skipped in the ngIf condition and not displayed in menubar)