Una forma de lograr lo que desea es mantener un estado en su componente que indique qué ruta de navegación "sub" está seleccionada actualmente, de una lista de todas las opciones posibles.

 export class AppComponent { public readonly libraryItems = [ 'Geysers del Tatio (Standard)', 'Geysers del Tatio (Superior)', 'Geysers del Tatio (Lujo)', ]; public activeItem = this.libraryItems[0]; }

Con estos en su lugar, puede representar en la plantilla de su componente el elemento desplegable activo, así como la lista de selecciones de elementos restantes.

 <li class="breadcrumb-item active drop-container"> <a href="#"> <!-- display currently selected dropdown item --> <span>{{ activeItem }}</span> <span class="glyphicon glyphicon-triangle-bottom small" aria-hidden="true"></span> </a> <div class="drop bg-white"> <ul> <!-- loop all dropdown items --> <li *ngFor="let item of libraryItems"> <!-- ...but only render dropdown items that are not active --> <span *ngIf="item !== activeItem">{{ item }}</span> </li> </ul> </div> </li>

Finalmente, para agregar el comportamiento de intercambiar textos desplegables, puede vincular esa lógica cuando se hace clic en un elemento desplegable en la selección, así:

 <!-- in the component template --> <span *ngIf="item !== activeItem" (click)="activeItem = item">{{ item }}</span>

Aquí hay una demostración funcional: https://stackblitz.com/edit/angular-ivy-xcp3wg?file=src/app/app.component.html