The JSON data provided is structured as follows.
[
{
"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
}
]
An attempt is being made to iterate through each object. If the title matches, only the first object in the menu bar is displayed. Based on the 'isActive' field (which changes according to the route), the active class is applied to the object.
The following are the titles displayed in the menu bar and it is desired for both driver objects to remain active:
- Vehicle
- Driver
- Quote
A comparison is made between the current and previous title. If they match, that object is skipped using an ngIf condition.
<ul>
<ng-container let menu of menuArray; let i=index>
<!-- For index 0, there is no title, so it should be ignored -->
<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>
The goal is to keep the first driver object active when the current index is within the second driver object (the second driver object will be skipped in the ngIf condition and not displayed in the menu bar).