Tengo los datos json como se muestra a continuación.

 [ { "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 } ]

Estoy tratando de recorrer cada objeto y si el título es el mismo, estoy mostrando solo el primer objeto en la barra de menú. Según el campo isActive (que se actualiza según la ruta), estoy aplicando la clase activa al objeto.

Los siguientes son los 3 títulos que se muestran en la barra de menú y quiero mantener el controlador activo para ambos objetos del controlador.

• Vehículo
• Conductor
• Cotizar

Estoy comparando el título actual con el título anterior y si ambos coinciden, estoy omitiendo ese objeto usando la condición ngIf

 <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>

Cómo mantener activo el primer objeto de controlador cuando el índice actual está en el segundo objeto de controlador (el segundo objeto de controlador se omitirá en la condición ngIf y no se mostrará en la barra de menú)